Menu
I have the following markup:
<!DOCTYPE html>
<head>
<style>
#article * {
line-height: 2;
}
#article pre code {
line-height: 1;
}
</style>
</head>
<body>
<div id="article">
<pre>
<code>
!LOOP
.formula U|xiindex = U|xiindex + 1
.. U|xiindex ausgeben:
'U|xiindex'
</code>
</pre>
</div>
</body>
</html>The line-height-attribute in the #article pre code-part of the css seems to have no effect. What am I doing wrong here?
EDIT
Screenshots:
Full css:
Second commented out:
774
The line-height property defines the amount of space above and below inline elements. That is, elements that are set to display: inline or display: inline-block . This property is most often used to set the leading for lines of text.
The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.
Google runs a 1.5 line height for its body there, or 16px font size and a line-height of 24px.
We found the answer: Use a minimum value of 1.5 for line-height for main paragraph content. Headings aren't the main paragraph content, so line-height doesn't have to be 150% to be accessible. In most cases, headings are just 1-3 lines of text.
This explains it better.. https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
#article is a block-level element, so the code below sets the minimum line-height for the inline elements inside it. In this case, it is "2".
#article > * {
line-height: 2;
}
The next code, sets the line-height of the non replaced inline element "code" to "1", but is ignored or drowned out since the parent element has set a minimum of "2". Hence you will only noticed a change when you set it higher.
#article pre code {
line-height: 1;
}
Setting display:block or inline-block as below would set its own minimum and prevent it from inheriting the parent line-height.
#article pre code {
display:inline-block;
line-height: 1;
}
answered Nov 04 '22 04:11
After some research, I still have no definite reason, but at least, I found out that it seems to have something to do with the code tag.
So, I figured out a workaround:
#article > * {
line-height: 2;
}
#article pre {
line-height: 1;
}<div id="article">
<pre>
<code>
!LOOP
.formula U|xiindex = U|xiindex + 1
.. U|xiindex ausgeben:
'U|xiindex'
</code>
</pre>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
