Margin-top 百分比与父级无关答案

【问题标题】：Margin-top percentage not relative to parentMargin-top 百分比与父级无关
【发布时间】：2018-08-24 03:05:44
【问题描述】：

我很难理解为什么“方形”类与父级“容器”无关。

即 - 我将容器设置为 200px 的高度； “方形”类在容器内，向左浮动。

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

.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;
}

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

【问题讨论】：

this 会回答您的问题吗？百分比边距是相对于容器的宽度，而不是高度。

标签： html css

【解决方案1】：

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

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

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

top: 5%;
position: relative;

【讨论】：

【解决方案2】：

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

【讨论】：