CSS之padding内边距

内边距（padding）

padding属性用于设置内边距。 是指 边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

注意： 后面跟几个数值表示的意思是不一样的。

值的个数表达意思
1个值 padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素
2个值 padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3个值 padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4个值 padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子的内边距</title>
    <style>
        .father { /* 这是个300*300的盒子*/
            width: 200px;
            height: 200px;
            background-color: red;
           /* padding: 100px;*/ /*实现儿子盒子居中,或者下面的写法*/
            padding-left: 100px; /*实际开发只要考虑左上就可以了*/
            padding-top: 100px;
        }

        .son { /*这是个100*100的盒子。在300*300的盒子居中显示，上下左右边距均是100*/
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son">

    </div>
</div>
</body>
</html>

 

posted @ 2019-04-05 10:06  showTimehzy  阅读(670)  评论(0)  编辑  收藏  举报