如何用css空间div的孩子？

我想要一个30px的差距在我的div的所有孩子之间.如果我有：

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

我想让他们都有一个30px的空间;它们之间.我怎么能用CSS呢？

解决方法

对于未知数量的孩子,您可以使用.

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

这将为#parent的所有直接孩子添加30px的顶部和底部边距.

但是,img不会显示为默认值,因此您可以使用：

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

块元素的垂直边距将被折叠.但是,您的父级div的顶部和底部将保留余量.为避免使用以下代码：

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

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

这只会增加顶部边距,并删除第一个元素的顶部边距.