Question

我无法理解为什么＆＃34; square＆＃34; class不是相对于父，＆＃34;容器＆＃34;。

即 - 我将容器设置为高度为200px; ＆＃34; square＆＃34; class在容器内，并向左浮动。

当我将margin-top设置为5％时，它不是200px的5％，而是其他东西。为什么？

＆＃13;

.container {
  height: 200px;
  background-color: gray;
}

.square {
  width: 20%;
  height: 70%;
  margin-left: 20px;
  margin-top: 5%; /* this guy right here */
  background-color: white;
  float: left;
}

＆＃13;

<div class="container">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

＆＃13;

Answer 1

垂直填充和边距相对于父级的宽度。另一方面，顶部和底部不是。

尝试将div放在另一个内。使用top属性（例如：top：25％）并确保指定位置（例如position：relative;）

我已经分叉并调整了您的代码示例来演示我的意思：https://codepen.io/anon/pen/Yaqmva

top: 5%;
position: relative;

Answer 2

margin属性采用父级的宽度而不是高度。您可以使用一些JavaScript来创建与高度相关的边距。

保证金最高百分比与父母无关

2 个答案: