CSS 如何用css分隔div的孩子？

How to space the children of a div with css?

提问by Click Upvote

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

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

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

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

我希望它们都有 30px 的空间；它们之间。我怎样才能用 CSS 做到这一点？

回答by DanielB

For an unknown amount of children you could use.

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

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

This will add a top and bottom margin of 30px to all direct children of #parent.

这将为#parent.

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

但img不显示为块默认值，因此您可以使用：

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

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:

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

#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.

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

回答by Shauna

Probably the easiest way is this:

可能最简单的方法是这样的：

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

or

或者

#parent * {
  margin: 15px 0;
}

Keep in mind, though, that this will get everythingin #parent, including things inside the pand divtags. If you want just the direct children, you can use #parent > *(this is call the direct descendent selector) instead.

请记住，虽然，这将让一切的#parent，包括里面的东西p和div标签。如果您只想要直接子代，则可以使用#parent > *（这称为直接后代选择器）代替。

Keep in mind, <img>is an inline element by default, so you might need to do:

请记住，<img>默认情况下是内联元素，因此您可能需要执行以下操作：

#parent img {
  display: block;
}

for it to use the margins.

让它使用边距。

回答by Tobiq

The following css will work well

下面的 css 会很好用

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

>selects all elements that are direct children of the div(so you don't get weird inner spacing issues), and adds a bottom margin to all that aren't the last child, using :not(:last-child)(so you don't get a trailing space).

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

display: blockmakes sure all elements are displayed as blocks (occupying their own lines), which imgs aren't by default.

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

回答by Ken D

Create a CSS class for them with code:

使用代码为他们创建一个 CSS 类：

.BottomMargin
{
    margin-bottom:30px;
}

And assign this class to parent's children using jQuery or manually like this:

并parent使用 jQuery 或手动将此类分配给的孩子，如下所示：

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

the last one may not have one and this is also doable using jQuery.

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

回答by Mark Huk

You can try it by CSS standarts:

您可以通过 CSS 标准来尝试：

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

More info could be found here: http://www.w3.org/TR/CSS2/selector.html#child-selectors

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

回答by Richard H

Just put a top and bottom margin of 30px on your pelement:

只需在您的p元素上放置 30px 的顶部和底部边距：

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

Note: the above will add this margin to allyour p elements. To restrict to just this one, either add an inline style attribute:

注意：上面会将此边距添加到您的所有p 元素中。要限制为仅此一个，请添加一个内联样式属性：

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

or better use a class:

或者更好地使用一个类：

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

and in css:

在 css 中：

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

Btw, the notation here for margin is:

顺便说一句，这里的保证金符号是：

margin: top right bottom left;

Or you can individually specify top and bottom margins:

或者您可以单独指定顶部和底部边距：

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

So you could have a class like this:

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

.bord { margin-bottom: 30px; }

and add this class to every element you want to have a margin-bottom of 30px:

并将这个类添加到每个你想让边距底部为 30px 的元素中：

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

回答by harkyman

Surest way is to add a class to all of the internal elements with the exception of the last one.

最可靠的方法是为除最后一个之外的所有内部元素添加一个类。

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

This way, additional elements can just be tagged with the class. Remember that you can multiclass style elements by separating them within the class value in the tag with spaces, like so:

这样，额外的元素就可以用类来标记。请记住，您可以通过在标签中的类值中用空格分隔样式元素来对样式元素进行多分类，如下所示：

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

Finally, you can attach the classes dynamically with Javascript (code off the top of my head, not tested, no sanity checks or error handling, ymmv etc.):

最后，您可以使用 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;
}