Question

我想要一个30px的差距;在我所有的孩子之间。例如，如果我有：

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

我希望他们所有人都有30px的空间;它们之间。我怎么能用CSS做到这一点？

Answer 1

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

#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;
}

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

Answer 2

可能最简单的方法就是：

#parent * {
  margin-bottom: 30px;
}

或

#parent * {
  margin: 15px 0;
}

请注意，这会在#parent中获得所有，包括p和div标记内的内容。如果您只想要直接子项，则可以使用#parent > *（这称为直接后代选择器）。

请注意，默认情况下<img>是内联元素，因此您可能需要这样做：

#parent img {
  display: block;
}

让它使用边距。

Answer 3

使用代码为

创建一个CSS类

.BottomMargin
{
    margin-bottom:30px;
}

使用jQuery将此类分配给parent的孩子，或者像这样手动分配：

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

最后一个可能没有，这也可以使用jQuery。

Answer 4

您可以轻松地做到这一点：

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

这将应用于除第一个孩子之外的所有直接子孩子，因此您可以将其视为元素之间的空白。

Answer 5

只需在p元素上放置30px的上下边距：

p { margin: 30px 0 30px 0; }

注意：以上内容会将此边距添加到 all 您的p元素中。要限制到这一个，请添加内联样式属性：

<p style="margin: 30px 0 30px 0;">...</p>

或更好地使用课程：

<p class="mypara">...</p>

和css：

p.para { margin: 30px 0 30px 0; }

顺便说一下，保证金的符号是：

margin: top right bottom left;

或者您可以单独指定上边距和下边距：

margin-top: 30px;
margin-bottom: 30px;

所以你可以有一个这样的课：

.bord { margin-bottom: 30px; }

并将此类添加到您希望保留底部为30px的每个元素：

<div class="bord">....</div>

Answer 6

您可以通过CSS标准尝试：

div > *{
   margin-top:30px;
}

可在此处找到更多信息：http://www.w3.org/TR/CSS2/selector.html#child-selectors

Answer 7

以下CSS可以正常工作

div > *:not(:last-child) {
    display: block;
    margin-bottom: 30px; 
}

>选择所有div的直接子元素（这样就不会出现奇怪的内部间距问题），并为所有不是最后一个子元素的元素添加底边距，使用:not(:last-child)（这样就不会出现尾随空格）。

display: block确保所有元素都显示为块（占用其自己的行），默认情况下未显示img块。

Answer 8

当然，最后一种方法是向所有内部元素添加一个类，但最后一个元素除外。

<style>
.margin30 {
   margin-bottom: 30px;
}
<div id="parent">    
  <img class="margin30" ... />
  <p class="margin30">...</p>
  <div>.......</div>
</div>

这样，可以使用类标记其他元素。请记住，您可以通过将标记中的类值与空格分隔来对多样式元素进行多类化，如下所示：

<img class="margin30 bigimage" ... />

最后，您可以使用Javascript动态附加类（代码在我的头顶，未经过测试，没有健全性检查或错误处理，ymmv等）：

function addSpace(elementId) {
   children = document.getElementById(elementId).childNodes;
   for (i=0;i<(children.length - 1);i++)
      children[i].className = "margin30 " + children[i].className;
}

如何用css来区分div的孩子？

8 个答案: