demo37-盒子内边距 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width:300px;
                height:300px;
                background: pink;
                /*
                 文字内容距离四周都有20px
                 padding:内边距
                 内边距一般用在父子关系的元素里面,表示元素的内容和父亲元素的距离                    
                 如果只有一个参数,表示是距离四周
                 * */
                /*padding: 20px;*/
                /*如果是两个参数,第一个表示上下,第二个表示左右*/
                /*padding: 10px 20px;*/
                /*三个参数,第一个表示上,第二个是左右,第三个是下*/
                /*padding: 10px 20px 30px;*/
                /*四个参数:第一个上,第二个参数右,第三个下,第四个左.顺时针方式*/
                padding: 10px 20px 30px 40px;
            }
        </style>
    </head>
    <!--
        盒子模型 内边距
        标签大小:border+padding+content三个才是一个标签的实际大小
        使用文字标签,系统自动添加16px的外边距
    -->
    <body>
        <div>
            <p>黑马程序员</p>
        </div>
    </body>
</html>

演示效果:

 

posted @ 2020-03-28 15:20  砚台是黑的  阅读(115)  评论(0)  编辑  收藏  举报