CSS中padding的特殊性
       通常我们都知道设置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。


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/k491022087/article/details/52374183
文章标签: html 前端 css padding
个人分类: CSS
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

CSS中padding的特殊性

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭