如何用css分隔div的孩子？ [英] How to space the children of a div with css?

问题描述

我希望有30px的差距；在我div的所有孩子之间。例如，如果我有：

I want a gap of say 30px; between all children of my div. E.g if I have:

<div id="parent">    
   <img ... />
   <p>...</p>
   <div>.......</div>
</div>

我希望它们所有人之间的间距均为30px；它们之间。

I want all of them to have a space of 30px; between them. How can I do this with CSS?

推荐答案

对于未知数量的孩子，您可以使用。

For an unknown amount of children you could use.

#parent > * {
    margin: 30px 0;
}

这将为所有 #parent 。

但是 img 不会显示为块默认情况下，因此您可以使用：

But img is not displaying as block default, so you may use:

#parent > * {
    display: block;
    margin: 30px 0;
}

块元素的垂直边距将被折叠。但是，您的父div的顶部和底部将有边距。为避免这种情况，请使用以下代码：

Vertical margins of block elements will be collapsed. But you will have margins at top and bottom of your parent div. To avoid that use the following code:

#parent > * {
    display: block;
    margin-top: 30px;
}

#parent > *:first-child {
    margin-top: 0px;
}

这只会增加上边距，并删除第一个元素的上边距。

This will only add top margin and removes that top margin for the first element.

这篇关于如何用css分隔div的孩子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！