CODEWITHSUNDEEP
htmlcss
Nils-o-mat
Nils-o-mat

Reputation: 1257

Line-height in code-tag

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: enter image description here

Second commented out: enter image description here

Upvotes: 5

Views: 2757

Answers (2)

mmgross
mmgross

Reputation: 3092

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>

Upvotes: 2

Keith A
Keith A

Reputation: 801

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;
}

Upvotes: 12

Related Questions