Question

我对line-height中的css做了一些澄清。我尝试了以下代码：

＆＃13;

.red {
  line-height: 4.1;
  border: solid red;
}

.box {
  width: 18em;
  display: block;
  vertical-align: top;
  font-size: 15px;
}

＆＃13;

<div class="box red">
 <div>Avoid unexpected results by using unit-less line-height</div>
  length and percentage line-heights have poor inheritance behaviour ...
</div>

＆＃13;

在上面的示例中，我没有使用display:inline或display:inline-block，但我仍然可以看到文本之间的间距。为什么？

此外，我还有一个澄清：当我在line-height : 25em;元素上inline-block申请<div style="display:inline-block;line-height : 25em;"></div>时，此元素的顶部和底部相对于其父或会占用其子元素的内联元素的间距吗？

Answer 1

在上面的例子中，我没有使用display：inline或 display：inline-block，但我仍能看到它们之间的间距文字。为什么？

一个元素从其父级继承line-height，无论它是inline / inline-block / block，但正如您在下面所见，{{1} } element的行为与block不同，inline元素本身不受影响（div元素之间没有空格），但其内容是。

block

body {
  line-height: 4;
}
div, span {
  background: lightblue;
}
div + div, span + span {
  background: lightgreen;
  line-height: 3;
}
div + div + div {
  background: lightgray;
  line-height: 2.5;
}

当我应用行高时：25em;在一个内联块元素中说<span> This is a sample text inside a span element<br> that has a line break making this come in 2 lines </span> <span> This is a sample text inside a span element </span> <div> This is a sample text inside a div element<br> that has a line break making this come in 2 lines </div> <div> This is a sample text inside a div element </div> <div> <span> This is a sample text inside a span element<br> that has a line break making this come in 2 lines </span> <span> This is a sample text inside a span element </span> <div>，将是空间占据该元素的顶部和底部相对于它父或其内联元素的间距将出现儿？

为其子女

<div
  style="display:inline-block;line-height : 25em;"></div>

div:nth-child(2) {
  display: inline-block;
  line-height: 4;
  background: lightgreen;
}
div:nth-child(1),
div:nth-child(3) {
  background: lightblue;
}

Answer 2

行高指示文本位于高度值上的行。把它想象成用记事本写的时候。更改线高时，无论句子是否溢出到下一行，都会改变线之间的距离。

如果你试图在句子之间找到差距，请用＆＃34; p＆＃34;标签，然后为您的标签添加填充和/或边距。

.p { margin: 10px 0; }
.p { padding: 10px 0px; }

Answer 3

您好我觉得问题不在于行高。我认为主要问题是 -

宽度：18em;

要明白他们。基本上，em取决于其父母的价值。仔细阅读。我认为你的问题将得到解决。如果您仍然遇到问题，请使用 -

宽度：100％;

CSS中的行高

3 个答案: