css margin padding之百分比

最新推荐文章于 2022-10-09 17:27:29 发布

kylin_zdd1993

最新推荐文章于 2022-10-09 17:27:29 发布

阅读量918

点赞数

文章标签： css margin padding 百分比

本文链接：https://blog.csdn.net/SDUST_JSJ/article/details/74336328

版权

总所周知，margin和padding上可能的值可以是auto、px、em、rem等，当然，也可以是%。
当值为auto时，margin和padding边距依赖于浏览器。
当值为px、em、rem时，是一个固定的值，由浏览器进行计算，相对比较容易理解。
这其中最有意思的值是%，margin、padding设置百分比的值时，参照的都是父元素的宽度，而非left、right参照宽度，top、bottom参照高度。
代码如下所示：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css margin padding 之百分比</title>
    <style type="text/css">
        #wrapper {
            width: 200px;
            height: 100px;
        }

        #inner {
            width: 240px;
            height: 90px;
            margin-top: 50%;
            margin-bottom: 50%;
            padding-top: 50%;
            padding-bottom: 50%;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <img id="inner" src="http://www.csdn.net/css/logo.png"/>
</div>
</body>
</html>

浏览器计算的长度如图所示：
结果如图所示

kylin_zdd1993

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css margin padding之百分比

总所周知，margin和padding上可能的值可以是auto、px、em、rem等，当然，也可以是%。当值为auto时，margin和padding边距依赖于浏览器。当值为px、em、rem时，是一个固定的值，由浏览器进行计算，相对比较容易理解。这其中最有意思的值是%，margin、padding设置百分比的值时，参照的都是父元素的宽度，而非left、right参照宽度，top、bot
复制链接

扫一扫