关闭

CSS中padding的特殊性

标签: html前端csspadding
153人阅读 评论(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。


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:92287次
    • 积分:1456
    • 等级:
    • 排名:千里之外
    • 原创:66篇
    • 转载:0篇
    • 译文:0篇
    • 评论:3条
    文章分类
    最新评论