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

我有一个包含显示设置为内联块的元素的div。这些包含的元素有不同的高度。根据它们中元素的高度，div中产生的线条具有不同的高度。这是我想要的。但我想在div中的行之间添加一些空格。例如，具有背景颜色集的相邻线条中的元素应该在它们之间具有可见的间隙。 paragrpah的常见建议是设置行高，但是这为div中的所有行设置了相同的高度，这是我不想要的。有没有一种方法可以在线条之间设置空格，而不必将所有线条设置为同一高度并且不修改所包含的元素？如何在没有设置行高的情况下设置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中，只是为了设置一个公共边距。如果我这样做，两个divs的利润率就不会崩溃，我可以忍受。在这种情况下，所有内容都是div的情况下，这种方式已经足够好了，但如果我混合了文本和div（即文本与div分开），则不起作用，在这种情况下，我会回来希望能够找到一种方式指定行间距。

来源

2012-07-30 Ian

这只能通过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>

来源

2012-07-30 11:07:25 Jay

也可以用'border'完成，但'margin'更简单。 – Jay 2012-07-30 11:09:23

风格的内部divs是我所做的，与什么风格（边缘，边框或填充）的变化是杰伊，grillp和bkizer1都推荐。我搜索了很多小时，并没有发现任何直接控制行间距的指示，而不是行高，所以我想就是这样。 Jay提供了一个很好的例子，所以我标记了这个答案，但是要感谢所有人。 – Ian 2012-07-31 03:19:27

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

来源

2012-07-30 02:24:34 grillp

我希望不必重写所有包含的元素。应用于包含div的边距和边框不会影响div中行之间的间距。 – Ian 2012-07-30 02:33:11

对不起..刚刚编辑我的答案..'p'没有显示..我假设你的DIV包含一堆段落？ – grillp 2012-07-30 02:48:14

对不起，没有段落（它们不能包含块元素，即使包含的块元素将显示设置为内联块）。我为这个例子添加了一个例子和进一步的解释，因为我似乎没有对自己说得很清楚 - 对此抱歉。 – Ian 2012-07-30 03:03:20

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

padding:25px;

您还可以指定：填充右，填充，底部等

来源

2012-07-30 02:26:02 bkizer1

我试图向外部div添加填充，但它不会影响div内部行之间的差距。我可以重写所有包含的元素，但我希望有一种方法可以避免这种情况。 – Ian 2012-07-30 02:31:18

什么是关于使用内嵌块和每列的列是更多的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-21 20:58:13 Michael

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

回答

相关问题