最高保证金百分比不相对于父项 [英] Margin-top percentage not relative to parent

问题描述

我很难理解为什么方形类与父级容器不是相对的。

I an having trouble understanding why the "square" class isn't relative to the parent, "container".

即-我将容器的高度设置为200px；
正方形类位于容器内，并向左浮动。

i.e - I set the container to have a height of 200px; the "square" class is inside the container, and is floated left.

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

When I set margin-top to be 5%, it is not the 5% of 200px but something else. Why?

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

推荐答案

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

Vertical padding and margin are relative to the width of the parent. Top and bottom on the other hand are not.

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

Try to place a div inside another. Use the top property (for example: top: 25%) and make sure you specify a position (e.g. position: relative;)

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

I've forked and adjusted your code example to demonstrate what I mean: https://codepen.io/anon/pen/Yaqmva

top: 5%;
position: relative;

这篇关于最高保证金百分比不相对于父项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！