Question

我有一个包含显示设置为内联块的元素的div。这些包含的元素具有不同的高度。根据其中元素的高度，div中的结果线具有不同的高度。这就是我想要的。但是我想在div中的行之间添加一些空格。例如，具有背景颜色集的相邻行中的元素应该在它们之间具有可见的间隙。 paragrpah的常见建议是设置行高，但这会为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），它将无法工作，在这种情况下，我会回到希望我能找到一种方法指定行间距。

Answer 1

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

Answer 2

使用css padding属性怎么样？例如：

padding:25px;

您还可以指定：padding-right，padding-bottom等

Answer 3

这只能使用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>

Answer 4

什么是使用带有内联块的列，每列中都有更多的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>

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

4 个答案: