33.盒子模型-内边距

最新推荐文章于 2022-03-28 00:06:28 发布

广东码农

最新推荐文章于 2022-03-28 00:06:28 发布

阅读量121

点赞数

分类专栏： html+css 文章标签： css

本文链接：https://blog.csdn.net/quanxiaobai_/article/details/115826999

版权

html+css 专栏收录该内容

82 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            内边距（padding）
                -内容区和边框之间的距离是内边距
                -一共有四个方向的内边距：
                    padding-top
                    padding-right
                    padding-bottom
                    padding-left
                -内边距的设置会影响到盒子的大小
                -背景颜色会延伸到内边距上

            一个盒子的可见框的大小，由内容区 内边距 和 边框共同决定，
            所以在计算盒子大小时，需要将这三个区域加到一起计算

            padding内边距的简写属性，可以同时指定四个方向的内边距
            规则和border-width一样
         */
        .box1{

        }

        .inner{

        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="inner"></div>
    </div>
</body>
</html>