CSS中padding的特殊性

最新推荐文章于 2021-12-30 23:11:11 发布

安静的对折

最新推荐文章于 2021-12-30 23:11:11 发布

阅读量506

点赞数

分类专栏： CSS 文章标签： html 前端 css padding

本文链接：https://blog.csdn.net/k491022087/article/details/52374183

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

通常我们都知道设置padding值会改变盒子的大小，现在就来说说，在什么情况下，设置padding不会改变盒子的大小。

当一个大盒子包含一个小盒子，并且大小盒子都是块级元素，而且小盒子的宽度是继承大盒子的话，那么设置小盒子的padding-left不会改变小盒子的大小。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .one {
            width: 250px;
            height: 250px;
            background: red;
        }
        .two {
            height: 200px;
            background: green;
            padding-left: 20px;
        }
    </style>
</head>
<body>
<div class="one">
    <div class="two"></div>
</div>
</body>
</html>

运行后可以发现小盒子的大小没有改变，改变的仅仅是内容区域减少了20px。