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

How to set the space between lines in a div without setting line height

提问by Ian

I have a div containing elements with display set to inline-block. These contained elements have various heights. The resulting lines in the div have various heights, according to the heights of the elements in them. This is as I want it. But I want to add some space between the lines in the div. For example, elements in adjacent lines with background color set should have a visible gap between them. The common advice for a paragrpah is to set line-height, but this sets the same height for all lines in the div, which I don't want. Is there a way to set a space between the lines without making all the lines the same height and without modifying the contained elements?

我有一个 div，其中包含显示设置为 inline-block 的元素。这些包含的元素具有不同的高度。根据其中元素的高度，div 中的结果行具有不同的高度。这是我想要的。但我想在 div 的行之间添加一些空格。例如，设置了背景颜色的相邻行中的元素之间应该有一个可见的间隙。paragrpah 的常见建议是设置行高，但这会为 div 中的所有行设置相同的高度，这是我不想要的。有没有办法在不使所有行具有相同高度且不修改包含的元素的情况下设置行之间的空间？

In a simplified form the HTML content looks like this:

以简化形式，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>

Each inner div has different content: different height and width.

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

I can style all the inner divs. Pragmatically, I have already done that and have a result I could live with. But I was surprised to see that CSS doesn't have an obvious way to set line spacing (i.e. the space between lines, as opposed to the height of lines: I know about line-height but it is not, directly, line spacing and has the (undesired in this instance) effect of making all the lines the same height - even the lines where all the elements in the line have a low height). I am curious to know if there is a way to set line spacing as a parameter of the outer div, without setting the line height.

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

I think of it as line spacing, but another way to think of it is top and bottom margin on each line in the outer div, rather than on the outer div as a whole, and without overriding the top and bottom margins of all the inner divs (which is what I have done for now) or making all the lines the same height (as line-height does).

我认为它是行距，但另一种思考方式是外部 div 中每行的顶部和底部边距，而不是整个外部 div，并且不覆盖所有内部 div 的顶部和底部边距divs （这是我现在所做的）或使所有行具有相同的高度（如 line-height 所做的那样）。

The only way I can think of to do it without overriding the margins of the inner divs, is by wrapping each in another div, simply to set a common margin. If I do it this way, the margins of the two divs don't collapse, which I can live with. This works well enough in this case, where all the content is divs, but it wouldn't work if I had mixed text and divs (i.e. text interspersed with divs), in which case I would be back to wishing I could find a way to specify line spacing.

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

采纳答案by Jay

That can only be done using marginstyle. You don't need to wrap each contained DIVs with another DIV. Just use the STYLEtag.

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

Here's an example. Border and colorings are added for demo purpose.

这是一个例子。添加边框和着色用于演示目的。

<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>

回答by grillp

Why not try CSS margin or border settings on your P elements?

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

回答by bkizer1

What about using the css padding property? For Example:

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

padding:25px;

You can also specify: padding-right, padding-bottom, etc.

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

回答by Michael

Whats about to use columns with inline-block and in each column are more divs.

即将使用带有内联块的列，并且每列中有更多的 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>