Question

我有以下标记：

<!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>

#article pre code中的line-height-attribute - css的一部分似乎没有效果。我在这里做错了什么？

修改

截图：全css： enter image description here

第二次评论： enter image description here

Answer 1

这更好地解释了.. https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

#article是块级元素，因此下面的代码设置其中内联元素的最小行高。在这种情况下，它是＆＃34; 2＆＃34;。

#article > * {
    line-height: 2;
}

下一个代码，设置非替换内联元素＆＃34;代码＆＃34;的行高。 to＆＃34; 1＆＃34;，但由于父元素设置了最小值＆＃34; 2＆＃34;而被忽略或淹没。因此，当您将其设置得更高时，您只会注意到更改。

#article pre code {
    line-height: 1;
}

设置display：block或inline-block如下所示将设置自己的最小值并阻止它继承父行高。

#article pre code {
    display:inline-block;
    line-height: 1;
}

Answer 2

经过一些研究，我仍然没有明确的理由，但至少，我发现它似乎与code标签有关。

所以，我想出了一个解决方法，我希望这对你有帮助

  #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>

代码标记中的行高

2 个答案: