4

我有一个 div，其中包含显示设置为 inline-block 的元素。这些包含的元素具有不同的高度。根据其中元素的高度，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，并且不覆盖所有内部的顶部和底部边距divs （这是我现在所做的）或使所有行的高度相同（就像 line-height 一样）。

在不覆盖内部 div 的边距的情况下，我能想到的唯一方法是将每个 div 包装在另一个 div 中，只需设置一个公共边距。如果我这样做，两个 div 的边距不会塌陷，我可以忍受。这在这种情况下工作得很好，所有的内容都是 div，但如果我混合了文本和 div（即文本穿插有 div），它就行不通了，在这种情况下，我会希望我能找到一种方法指定行距。

4

4 回答 4

2

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

于 2012-07-30T02:24:34.370 回答
2

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

padding:25px;

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

于 2012-07-30T02:26:02.217 回答
1

这只能使用margin样式来完成。您不需要将每个包含DIV的 s 与另一个 s包装起来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>
于 2012-07-30T11:07:25.110 回答
0

什么将使用带有 inline-block 的列，并且在每列中都有更多的 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>
于 2013-01-21T20:58:13.803 回答