11.css盒子模型-内边距padding

作者: 欣博客 | 来源:发表于2020-02-17 23:34 被阅读0次

css第三节
11.css盒子模型-内边距padding
盒子模型
Css 盒子模型和box-sizing
我对盒子模型的理解
盒子模型的创建和设置
关于知识点
CSS盒模型
盒模型，边框，内外边距，浏览器的默认样式，内联元素的盒模型，di
盒子模型

内边距（padding），指的是盒子的内容区与盒子边框之间的距离
一共有四个方向的内边距，可以通过：

padding-top
padding-right
padding-bottom
padding-left

来设置四个方向的内边距
内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距,
盒子的大小由内容区、内边距和边框共同决定

盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width

可见宽的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">

            .box1{
                width: 200px;
                height: 200px;
                background-color: #bfa;
                /*设置边框*/
                border: 10px red solid;
                /*设置上内边距*/
                /*padding-top: 100px;*/
                /*设置右内边距*/
                /*padding-right: 100px;
                /*设置下内边距*/
                /*padding-bottom: 100px;*/
                /*设置下左边距*/
                /*padding-left: 100px;*/
                /* 简写:上右下左 顺时针顺序设置 padding的大小 */
                padding: 10px 20px 30px 40px;
            }

            /*
             * 创建一个子元素box1占满box2
             */
            .box2{
                width: 100%;
                height: 100%;
                background-color: yellow;
            }

        </style>
    </head>
    <body>

        <div class="box1">
            <div class="box2"></div>
        </div>

    </body>
</html>

image.png