HTML+CSS-01：padding使用，对盒子的影响

最新推荐文章于 2024-06-23 12:25:57 发布

金皮癞蛤蟆

最新推荐文章于 2024-06-23 12:25:57 发布

阅读量1.4k

点赞数

分类专栏： # HTML+CSS知识文章标签： css html5 html css3

本文链接：https://blog.csdn.net/Luckly_smile/article/details/116378770

版权

3 篇文章 0 订阅

订阅专栏

padding使用，对盒子的影响

padding主要用来对box（盒子）里面内容进行设置内边距。
目的：控制box（盒子）里面的内容里边框的距离，为了更加好看
在这里插入图片描述

在这里插入图片描述

使用过程：使用的过程中，可能会出现，padding的设置会撑开box的大小。如
没有设置padding前：

在这里插入图片描述

在这里插入图片描述

发现padding的出现会把原本的div，即盒子撑开大小，这样我们的盒子就不是原来设置需要的200*200了，会影响周边的元素布局

在这里插入图片描述

结果如上，盒子内部大小160+内边距padding大小40 就等于总的盒子大小200*200

理解：如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

如：

p {
           height: 200px;
            background-color: pink;
            /* padding: 30px; */
        }
<body>
      <h1></h1>
</body>

编写一个标签，高度200px,不指定宽度，则为浏览器的宽度
在这里插入图片描述
从上看到我浏览器的宽为1904，然后h1高位200

        h1 {
            height: 200px;
            background-color: pink;
            padding: 50px;
        }

结果：
在这里插入图片描述
如上，h1变为了1904*300
原因：
因为我没有设置h1标签的宽，所以padding并不会撑开，而我设置了高height为200px，所以设置padding后，高会被撑开为50+200+50=300，所以h1标签的高变为了300
总结：

关注

专栏目录