4、内边距 padding

CSSpadding（内边距）属性，定义元素边框与元素内容之间的空间。 padding可以单独改变元素的上、下、左、右边距，也可以一次改变所有的属性。

.1、单个方向设置

• padding-bottom 设置标签的下内边距

• padding-left 设置标签的左内边距

• padding-right 设置标签的右内边距

• padding-top 设置标签的上内边距

.2、取值

• px

• 默认值0

• 百分比

• 不可使用负值

.box{
    width:200px;
    background-color:red;
    padding-left:10px;
    padding-right:20px;
    padding-top:30px;
    padding-bottom:40px;
}

3、简写

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

• 语法：padding：1-4个值 【空格隔开】

• 规则：

  • 1个值：表示【四个方向】的内边距值

  • 2个值：分别表示【上下，左右】的内边距值

  • 3个值：分别表示【上，左右，下】的内边距值

  • 4个值：分别表示【上，右，下、左】的内边距值

.box{
    width:200px;
    background-color:red;
    
    padding:10px 20px 30px 40px;
}

2、外边距margin

概述：用于设置盒子与盒子之间的距离。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

3.1、单个方向定义

• margin-bottom 设置下内边距

• margin-left 设置左内边距

• margin-right 设置右内边距

• margin-top 设置上内边距

.box{
    width:200px;
    background-color:red;
    
    margin-left:10px;
    margin-right:20px;
    margin-top:30px;
    margin-bottom:40px;
}

42、简写

• 语法：空格隔开

• 取值：1-4个规则与padding值一致

• 取值

  • px

  • auto浏览器自动计算

  • 允许使用负值

.box{
    width:200px;
    background-color:red;
    margin:10px 20px 30px 40px;
}

2.3、外边距应用

外边距实现已知宽度的块级盒子水平居中。