盒子边距百分比计算

发表于 更新于 分类于 阅读次数： Disqus：
CSS盒模型边距设置百分比的值, 不论是左右还是上下都是以父容器的宽度计算的，要记住上下边距（padding-top/padding-bottom/margin-top/margin-bottom）并不是以父容器的高度为基础计算的。

之前一直认为 margin-top 和 margin-bottom 设置百分比以父容器的高度计算，而 margin-left 和 margin-right 设置百分比以父容器的宽度计算，直到今天群里一个群友问：

bootstrap 中的栅格系统是如何设置 margin-top 百分比以宽度计算的?

原因是他发现设置的 margin: 10% 10%; 中 top 和 bottom 值是以父容器的宽度计算得到的结果。

经过一番测试及网上查找，才发现：原来 margin-top 和 margin-bottom 并不是以父容器的高度计算百分比的，而是同样以父容器宽度来计算，同样的 padding 内边距也是一样。

如按照以下样式设置

1
2
3
4
5
6
7
8
9
10
11
.father {
  width: 200px;
  height: 100px;
  border: 1px solid #000;
}
.son {
  width: 80%;
  height: 50%;
  margin: 10% 10%;
  background-color: #ff0000;
}
1
2
3
<div class="father">
  <div class="son"></div>
</div>

得到的结果是：

margind6856.png

不过也不是绝对这样，如果设置了 writing-mode 为纵向书写，比如 -webkit-writing-mode: vertical-lr; 此时按百分比书写的margin就会参照容器的高度来计算了。

在上例中的 father 中添加 -webkit-writing-mode: vertical-lr;

1
2
3
4
5
6
.father {
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  -webkit-writing-mode: vertical-lr;
}

得到的结果就是：

margin28db32.png