如何用css分隔div的孩子？

Posted 2023-03-06

【中文标题】如何用css分隔div的孩子？

【英文标题】：How to space the children of a div with css?

【发布时间】：2011-09-24 07:42:59

【问题描述】：

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

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

我希望它们都有 30px 的空间；它们之间。如何使用 CSS 做到这一点？

【问题讨论】：

元素四周各有 30px 的空间

【参考方案1】：

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

#parent > * 
    margin: 30px 0;

这将为#parent 的所有直接子级添加 30 像素的顶部和底部边距。

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

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

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

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


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

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

【讨论】：

所以填充将应用于所有后代，而不仅仅是孩子。

在您发表评论并添加“>”直接子选择器时，我正在编辑我的帖子。

查看 Topiq 的答案以获得更短的解决方案。要了解这两个选择器之间的区别，请看这里：***.com/a/12289888/1461929

【参考方案2】：

下面的css会很好用

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

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

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

【讨论】：

请解释为什么这是解决 OP 问题的方法。不鼓励在 SO 上仅提供代码答案，因为它们对 OP 或网站的未来访问者没有帮助。

最佳答案在这里。这篇文章更好地解释了与公认答案的区别：***.com/a/12289888/1461929

【参考方案3】：

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

#parent * 
  margin-bottom: 30px;

或

#parent * 
  margin: 15px 0;

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

请记住，<img> 默认是内联元素，因此您可能需要这样做：

#parent img 
  display: block;

让它使用边距。

【参考方案4】：

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

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

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

【参考方案5】：

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

.BottomMargin

    margin-bottom:30px;

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

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

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

【参考方案6】：

你可以通过 CSS 标准试试：

div > *
   margin-top:30px;

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

【参考方案7】：

只需在 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; 

并将此类添加到您希望底部边距为 30 像素的每个元素：

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

【讨论】：

我认为他希望父元素中的所有元素都有 30px 的边距，而不仅仅是段落。

Richard 的意思是他给出的代码实际上会给 OP 他想要的东西，但也许 OP 只是将这 3 个元素作为一个标记，它可能包含超过 3 个子元素。

如果你可以通过它的父 id 选择段落，为什么要另一个类

【参考方案8】：

使用 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

【参考方案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;