如何设置div中的行之间的空间，而不设置行高

问题描述

我有一个div包含显示设置为inline-block的元素。这些包含的元素具有各种高度。根据其中的元素的高度，div中的结果线具有各种高度。这是我想要的。但是我想在div中的行之间添加一些空格。例如，具有背景颜色集的相邻行中的元素应当在它们之间具有可见间隙。 paragrpah的常见建议是设置line-height，但这对div中的所有行设置相同的高度，我不想要。有没有办法在线之间设置一个空格而不使所有的线的高度相同，而不修改包含的元素？

在一个简化的形式HTML内容看起来像这：

 样式。您不需要用另一个 DIV 包装每个包含 DIV 只需使用 STYLE 标签。
 
 
 
这里是一个例子。 
 < style> 
 #container {width：30ex;轮廓：1px实心黑色; 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变量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> 
  
 
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?
In a simplified form the HTML content looks like this:
<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.
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.
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). 
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.
 解决方案 
That can only be done using margin style. You don't need to wrap each contained DIVs with another DIV. Just use the STYLE tag.
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>
                        
这篇关于如何设置div中的行之间的空间，而不设置行高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！