如何设置div中的行之间的空间，而不设置行高 [英] How to set the space between lines in a div without setting line height

问题描述

我有一个div包含显示设置为inline-block的元素。这些包含的元素具有各种高度。根据其中的元素的高度，div中的结果线具有各种高度。这是我想要的。但是我想在div中的行之间添加一些空格。例如，具有背景颜色集的相邻行中的元素应当在它们之间具有可见间隙。 paragrpah的常见建议是设置line-height，但这对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（即文本穿插与divs），这将不会工作，在这种情况下，我会回到希望我可以找到一种方式

$ <$>

解决方案样式。您不需要用另一个 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中的行之间的空间，而不设置行高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！