Question

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

在这里，以此示例代码为例...尝试更改.square p margin属性。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

p是block元素，由于父square也是如此，因此会出现此行为。

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

使用inline-block的示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您应该将display:inline-block;属性提供给孩子p。

＆＃13;

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

＆＃13;

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

＆＃13;

为什么子元素不会相对于父元素占用保证金

3 个答案: