HTML 内外边距

内边距 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;
}

外边距margin

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

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;
}