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

Question

我想要一个30px的差距; 在我所有的孩子之间.例如,如果我有:

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

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

Answer 1

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

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

这将为所有直接的孩子增加30px的上下边距#parent.

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

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

块元素的垂直边距将折叠.但是你的父div的顶部和底部都有边距.为避免这种情况,请使用以下代码:

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

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

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

Answer 2

您可以通过以下方式轻松做到这一点：

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

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

Answer 3

下面的 css 会很好用

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

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

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

Answer 4

使用 CSSgap属性。

.parent_class_name{
  gap: 30px;
}

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

示例：此代码将在元素（行和列）之间应用1rem间隙。

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

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

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

• 行距
• 柱间隙

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

了解更多：w3school

Answer 5

可能最简单的方法是:

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

要么

#parent * {
  margin: 15px 0;
}

请记住,虽然,这将让一切的#parent,包括里面的东西p和div标签.如果你只想要直接的孩子,你可以使用#parent > *(这称为直接后代选择器).

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

#parent img {
  display: block;
}

它使用边距.