2
Hello, everybody.
How do I inherit a value from a given attribute in CSS?
Example:
<div class="flex" id="1" style="line-height: 100px; height: 100px; background-color: red;">1</div>
<div class="flex" id="1" style="line-height: 200px; height: 200px; background-color: blue;">2</div>
<div class="flex" id="3" style="line-height: 300px; height: 300px; background-color: green;">3</div>In that case, I wanted the document only to match each line-Heigh with the height. How do I do that?
2
Follow an option using CSS variables.
The idea here starts from a base value set in the variable --altura, then we’ll do the overhide (overwrite) the value of that variable where we want it. Note that you only need to change the value of the variable and both the height as to the line-height of the element. Summarizing vc declares only 1 variable value that replaces the value of the 2 attributes you want to change left commented in the code for ease
:root {
--altura: 100px; /* valor "base" */
}
.altura, .altura2, .altura3 {
height: var(--altura); /* valor "da variável" */
line-height: var(--altura); /* valor "da variável" */
}
.altura2 {
--altura: 200px; /* overhide do valor da variável */
}
.altura3 {
--altura: 300px; /* overhide do valor da variável */
}
<div class="altura" id="1" style="background-color: red;">1</div>
<div class="altura2" id="1" style="background-color: blue;">2</div>
<div class="altura3" id="3" style="background-color: green;">3</div>
See browser support, note that it just doesn’t work in IE https://caniuse.com/#feat=css-variables
Very interesting, I didn’t know these CSS variables. Variables are accessible to all attributes of CSS? Or is there some limitation?
@lazyFox take a look at this answer that has a more detailed explanation of the variables. https://answall.com/questions/298995/o-que-significa-o-specified-no-root-do-css-do-bootstrap/298998#298998 But you already find a lot of material about it on the Internet, mostly in English unfortunately...
I think your answer is the simplest you can achieve with just CSS. Thanks for the response and thanks to all the others who contributed.
Browser other questions tagged html css attributes height
You are not signed in. Login or sign up in order to post.
If you’re going to match the line-height with the height of the element itself, you can(should) do it with javascript/jQuery. As far as I know, with pure CSS you can’t do it.
– LipESprY
Thank you so much for your comment, @Lipespry but I have a preference for a solution in CSS or HTML.
– victor sousa
@Lipespry with CSS is possible to get to something very close, because vc declares a value only that will be used in both height and line-height so vc declares only 1 value, but that is valid for the 2 attributes. See in response.
– hugocsl
@higocls Your idea, as interesting as it is, is still not as dynamic as the Victor Sousa intended. I imagine using a base class and a defining class as answered by lazyFox is a solution close to yours. The programmer’s job will be the same: set height and set a class/variable to set line-height. With jQuery for example, just sweep all elements with the class flex and set the line-height according to the height of the element itself... It would BEEEEM more dynamic...
– LipESprY
@Lipespry may be more dynamic, but not "MUCH" more, until pq anyway it will always have to declare a correct height? So whenever it declares the height the value of the variable is equal for the two, height and line-height. Summarizing it only needs to declare 1 value... From what I understand with jQuery you will have to scan the document, take the height value and put in line-height. sincerely did not see much advantage, even more thinking that you will need to index jQuery just for this... (if it does not exist in the project of course)
– hugocsl
@hugocsl is fair! Based on the question, any solution will not be so dynamic. If it is of interest, I can formulate a more dynamic solution using other methods (pure CSS/HTML). From what I understand, the goal is to vertically center the content of the div by defining only the height and background color. I would do with flexbox, but it has how to do with display: table|table-Cell.
– LipESprY
@Lipespry is, if it’s just to center vertically I would actually mark it as duplicate, because here’s a question about it with 23 rss responses! But inheriting value from another attribute is quite different from aligning vertically... so I didn’t vote to close as duplicate.
– hugocsl