为什么子元素相对于父元素不占边距[重复]答案

【问题标题】：Why the child element does not take margin relative to parent [duplicate]为什么子元素相对于父元素不占边距[重复]
【发布时间】：2017-09-03 11:01:03
【问题描述】：

我在 <div> 元素内为子 <p> 提供边距，但它正在移动 div 元素本身。我想将段落下移到任意值。我知道我们可以为父元素提供填充，但是呢？

在这里，使用此示例代码...尝试更改.square p 边距属性。

*{
  margin: 20px auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.square {
  width: 100px;
  height: 100px;
  background: #f56;
} .square p {
  margin: 50px auto;
}

&lt;div class="square"&gt;&lt;p&gt;Hi&lt;/p&gt;&lt;/div&gt;

不应该是相对于父元素的吗？

【问题讨论】：

标签： html css margin

【解决方案1】：

p 是 block 元素，这种行为是预期的，因为父 square 也是。

尝试 inline-block 显示 p 标签，您可以调整相对于父标签的边距。如果您想将p 保留为block，则应为父级提供overflow: hidden。

使用inline-block的示例：

*{
  margin: 20px auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.square {
  width: 100px;
  height: 100px;
  background: #f56;
} .square p {
  margin: 50px auto;
  display: inline-block;
}

&lt;div class="square"&gt;&lt;p&gt;Hi&lt;/p&gt;&lt;/div&gt;

【讨论】：

是的，这行得通。但是为什么我们需要修复，这是 W3C 不得不看的东西。无论如何，margin-collapse 有什么好处？
我不是专家。 @NenadVracar 应该知道。 :)

【解决方案2】：

这里的问题是父子margin collapsing。解决它的一种方法是使用overflow: hidden

* {
  margin: 20px auto;
  box-sizing: border-box;
}
.square {
  width: 100px;
  height: 100px;
  background: #f56;
  overflow: hidden;
}
.square p {
  margin: 50px auto;
}

<div class="square">
  <p>Hi</p>
</div>

【讨论】：

【解决方案3】：

您应该将display:inline-block; 属性赋予子p。

*{
  margin: 20px auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.square {
  width: 100px;
  height: 100px;
  background: #f56;
}
.square p {
  margin: 50px auto;
  display: inline-block;
}

&lt;div class="square"&gt;&lt;p&gt;Hi&lt;/p&gt;&lt;/div&gt;

【讨论】：