如何使用 css 分隔 div 的子项

Question

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

<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

以下 css 将运行良好

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

> 选择作为div的直接子元素的所有元素(因此您不会遇到奇怪的内部间距问题(，并使用 :not(:last-child) 为所有不是最后一个子元素的元素添加下边距(因此您不会获得尾随空格(。

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

Answer 3

您可以使用以下方法轻松执行此操作：

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

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

Answer 4

可能最简单的方法是：

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

或

#parent * {
  margin: 15px 0;
}

但请记住，这将#parent获取所有内容，包括p和div标签内的内容。如果只需要直接子级，则可以改用#parent > *(这称为直接后代选择器(。

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

#parent img {
  display: block;
}

供其使用边距。

Answer 5

使用 CSS gap 属性。

.parent_class_name{
  gap: 30px;
}

上面的 CSS 代码将在parent_class_name类的子类之间应用30px的间隙/分隔。

示例：此代码将应用元素(行和列1rem间隙(。

<div class="gap_container">
  <div>a</div>
  <div>b</div>
  <div>c</div>
</div>

.gap_container{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

gap 属性定义行和列之间的间距大小。它是以下属性的简写：

• 行间隙
• 列间距

分别应用row值和column值。 gap: row-value column-value;

了解更多： w3school

Answer 6

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

.BottomMargin
{
    margin-bottom:30px;
}

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

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

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

Answer 7

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

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

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

Answer 8

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

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

注意：以上内容会将此边距添加到所有 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 9

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

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