如何在不设置行高的情况下设置div中的行间距



我有一个div,其中包含显示设置为内联块的元素。这些包含的元件具有不同的高度。div中的结果行具有不同的高度,这取决于其中元素的高度。这是我想要的。但我想在div中的行之间添加一些空间。例如,设置了背景色的相邻行中的元素之间应该有一个可见的间隙。pararpah的常见建议是设置行高度,但这会为div中的所有行设置相同的高度,这是我不想要的。有没有一种方法可以在不使所有线条高度相同且不修改所包含元素的情况下设置线条之间的空间?

在简化的形式中,HTML内容如下所示:

<div>
    <div style="display: inline-block;...">variable stuff</div>
    <div style="display: inline-block;...">variable stuff</div>
    <div style="display: inline-block;...">variable stuff</div>
    <div style="display: inline-block;...">variable stuff</div>
    ...
</div>

每个内部div都有不同的内容:不同的高度和宽度。

我可以设计所有内部div的样式。务实地说,我已经做到了,并且有一个我可以接受的结果。但我惊讶地发现,CSS没有一种明显的方法来设置行间距(即行与行之间的间距,而不是行的高度:我知道行的高度,但它不是直接的行间距,并且具有使所有行都具有相同高度的效果(在这种情况下是不希望的),甚至是行中所有元素都具有较低高度的行)。我很想知道是否有一种方法可以将行距设置为外部div的参数,而无需设置线宽。

我认为它是行距,但另一种认为它的方式是外部div中每一行的上下边距,而不是整个外部div,并且不覆盖所有内部div的上下边缘(这就是我现在所做的)或使所有行具有相同的高度(如行高)。

在不覆盖内部div的边距的情况下,我能想到的唯一方法是将每个div包装在另一个div中,只需设置一个公共边距。如果我这样做,两个div的利润率不会崩溃,我可以接受。在这种情况下,这很好,因为所有内容都是div,但如果我将文本和div混合在一起(即文本中穿插着div),这就不起作用了,在这种情况中,我会希望我能找到一种指定行距的方法。

使用css填充属性怎么样?例如:

padding:25px;

您还可以指定:右侧填充、底部填充等。

为什么不在p元素上尝试CSS边距或边框设置?

这只能使用margin样式来完成。您不需要用另一个DIV包装每个包含的DIV。只需使用STYLE标签。

下面是一个例子。添加边框和颜色是为了演示。

<style>
    #container     {width:30ex; outline:1px solid black; padding:0 .2em; background:white;}
    #container>div {display:inline-block; margin:.2em 0; background:#fca;}
</style>
<div id="container">
    <div style="height:1em">variable</div>
    <div style="height:5em">variable stuff variable</div>
    <div style="height:2em">variable stuff</div>
    <div style="height:1em">variable</div>
    <div style="height:3em">variable stuff variable stuff</div>
    <div style="height:1em">variable</div>
    <div style="height:1em">variable</div>
    <div style="height:1em">variable</div>
    <div style="height:1em">variable</div>
</div>

将使用带内联块的列,并且每列中都有更多的div。

<div>
  <div style="display: inline-block;">
    <div>variable stuff</div>
    <div>variable stuff</div>
  </div>
  <div style="display: inline-block;">
    <div>variable stuff</div>
    <div>variable stuff</div>
  </div>
</div>

最新更新