关于margin与padding设置百分比的问题

最新推荐文章于 2025-05-27 11:32:54 发布

原创最新推荐文章于 2025-05-27 11:32:54 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #margin #padding #百分比设置

CSS 同时被 2 个专栏收录

4 篇文章

订阅专栏

随笔

3 篇文章

订阅专栏

本文探讨了在CSS布局中，当元素的margin-top、margin-bottom、padding-top和padding-bottom属性设置为百分比时，这些百分比实际上是相对于父元素的宽度进行计算的，而非高度。此外还介绍了通过设置writing-mode属性为纵向书写时，百分比会根据父容器的高度来计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

margin 与 padding 设置为百分比

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

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

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

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

如按照以下样式设置

  .father {
    width: 200px;
    height: 100px;
    border: 1px solid #000;
  }
  .son {
    width: 80%;
    height: 50%;
    margin: 10% 10%;
    background-color: #ff0000;
  }

<div class="father">
  <div class="son"></div>
</div>

得到的结果是：

margin-top百分比盒模型

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

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

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

得到的结果就是：

竖向的margin盒模型

以上内容查找来自于：
cxxsn的博文：margin-top百分比问题

感谢！