为什么 "margin-top:10%" 超过其父 div 的 10%？

Question

在我的 div-1 中，高度是 300px，但是当我尝试在其中向 <p> 添加边距时，它在 px 上工作得很好，但百分比超过其父 div.

的 10%

* {
  box-sizing: border-box;
  margin: 0;
}

.div-1 {
  border: 2px solid yellow;
  background: rgb(15, 15, 145);
  color: white;
  height: 300px;
}

.div-2 {
  border: 2px solid rgb(218, 20, 208);
  background: rgb(53, 88, 13);
  color: white;
  height: 300px;
}

.div-1 p {
  background: coral;
  padding: 20px;
  width: 20%;
  margin: auto;
  margin-top: 10%;
}

<div class="div-1">
  <p>div1</p>
</div>
<div class="div-2">
  <p>div1</p>
</div>

Answer 1

当你用百分比定义边距时，它是refer to the width of the containing block，尝试使用vh而不是%，或者使用其他解决方案，如果它不适合你的项目；另一种方法是使用 pseudo elements;查看代码片段中的差异：

* {
  box-sizing: border-box;
  margin: 0;
}

.div-1,
.div-2 {
  height: 300px;
  color: white;

}

.div-1 {
  border: 2px solid yellow;
  background: rgb(15, 15, 145);
}

.div-2 {
  border: 2px solid rgb(218, 20, 208);
  background: rgb(53, 88, 13);
  width: 70%;
}

.div-1.div--pseudo:before,
.div-2.div--pseudo:before {
  content: '';
  display: block;
  width: 100%;
  height: 10%;
  background: rgba(255, 255, 255, .2);
}


.div-1 p,
.div-2 p {
  background: coral;
  padding: 20px;
  width: 20%;
  margin-left: auto;
  margin-right: auto;
}

.div-1.div--simple p,
.div-2.div--simple p {
  margin-top: 10%;
}

.div-1.div--hv p,
.div-2.div--hv p {
  margin-top: 5vh;
}

<div class="div-1 div--simple">
  <p>div1 top gap depends on container width</p>
</div>

<div class="div-2 div--simple">
  <p>div2 top gap depends on container width</p>
</div>


<hr />

<div class="div-1 div--pseudo">
  <p>div1 with using pseudo gap</p>
</div>

<div class="div-2 div--pseudo">
  <p>div2 with using pseudo gap</p>
</div>

<hr />

<div class="div-1 div--hv">
  <p>div1 with using VH</p>
</div>

<div class="div-2 div--hv">
  <p>div2 with using VH</p>
</div>

Answer 2

您可以使用 css 变量：

:root {
  --h300     : 300px;
  }
* {
  box-sizing : border-box;
  margin     : 0; 
  }
.div-1 {
  border     : 2px solid yellow;
  background : #0f0f91;
  color      : white;
  height     : var(--h300);
  }
.div-2 {
  border     : 2px solid #da14d0;
  background : #35580d;
  color      : white;
  height     : var(--h300);
  }
.div-1 p {
  background : coral;
  padding    : 20px;
  width      : 20%;
  margin     : auto;
  margin-top : calc(var(--h300) / 10);
  }

<div class="div-1">
  <p>div1</p>
</div>
<div class="div-2">
  <p>div2</p>
</div>

为什么 "margin-top:10%" 超过其父 div 的 10%？

Why is "margin-top:10%" pushing more than 10% of its parent div?

css

margin