代码标记中的行高
我有以下标记:
<!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 codecss 的-part中的line-height-attribute 似乎没有效果.我在这做错了什么？
编辑
截图:完整的CSS:
第二个评论:
这解释得更好.. https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
#article是块级元素,因此下面的代码设置其中内联元素的最小行高.在这种情况下,它是"2".
#article > * {
line-height: 2;
}
下一个代码将非替换内联元素"code"的行高设置为"1",但由于父元素设置了最小值"2",因此被忽略或淹没.因此,当您将其设置得更高时,您只会注意到更改.
#article pre code {
line-height: 1;
}
设置display:block或inline-block如下所示将设置自己的最小值并阻止它继承父行高.
#article pre code {
display:inline-block;
line-height: 1;
}