margin值类型为百分比

最新推荐文章于 2021-03-23 21:47:24 发布

百起

最新推荐文章于 2021-03-23 21:47:24 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css3 css 文章标签： css margin

本文链接：https://blog.youkuaiyun.com/ygy162/article/details/49763211

css3 同时被 2 个专栏收录

4 篇文章

订阅专栏

css

4 篇文章

订阅专栏

本文探讨了CSS中使用百分比作为margin值时的行为特点，特别是当涉及到基于不同维度（宽度或高度）计算留白时的具体表现。通过一个具体示例说明了如何实现基于高度的百分比留白。

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

margin的值类型有两个
1、px（像素）
2、%（百分比）
这里主要描述当margin的值为百分比的时候，会出现的一个你意想不到的情况！

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

<style type="text/css">
    .container{width: 600px ;height: 400px; background-color: #eee;border: solid 1px #ddd;}
    .mg_top{width :100px; height: 50px ;background-color: #cce;margin-top: 10%;margin-left: 10%;}
</style>

外层的div 大小是600px 宽，400px高。
内层的div 大小是100px宽，50px 高。
内部div的margin 值设置成了百分比的形式，结果 margin的值都是
宽度X10%；

如果需要margin-top 、margin-left是高度的10% 你需要加一个

 -webkit-writing-mode: vertical-rl; /* for browsers of webkit engine */
    writing-mode: tb-rl; /* for ie */

不可能做到left 或者right 以宽度为参照，top和bottom 以高度为参照。
我们都知道margin值的个数有多重组合形式，当margin：10%；只有一个值的时候，请问浏览器改怎么计算留白呢？