这是我参与更文挑战的第 8 天，活动详情查看： 更文挑战
1 内边距（ padding ）属性
padding 方位属性
| 属性名 | 属性值 | 描述 | 实例 |
|---|---|---|---|
padding-top | 正数px | 设置上内边距的宽度 | padding-top: 2px; |
padding-right | 正数px | 设置右内边距的宽度 | padding-right: 2px; |
padding-bottom | 正数px | 设置下内边距的宽度 | padding-bottom: 2px; |
padding-left | 正数px | 设置左内边距的宽度 | padding-left: 2px; |
padding | 1 到 4 个正数px | 设置四个内边距的宽度 | padding: 2px 5px; |
padding 属性值
padding 属性值 | 描述 | 实例 |
|---|---|---|
5px | 当属性值为 1 个参数时，设置该盒子的四个内边距都为 5 像素 | padding: 5px; |
5px 10px | 当属性值为 2 个参数时，设置该盒子的上下内边距为 5 像素，左右内边距为 10 像素 | padding: 5px 10px; |
5px 10px 15px | 当属性值为 3 个参数时，设置该盒子的上内边距为 5 像素，左右内边距为 10 像素，下内边距为 15 像素 | padding: 5px 10px 15px; |
5px 10px 15px 20px | 当属性值为 4 个参数时，设置该盒子的上内边距为 5 像素，右内边距为 10 像素，下内边距为 15 像素，左内边距为 20 像素 | padding: 5px 10px 15px 20px; |
2 清除元素的默认内外边距
因为不同浏览器及同一浏览器的不同版本会给相同的元素设置不同的样式，包括元素的内外边框，为了使不同网页之间展示一样的效果。在开发时，可以把浏览器自带的元素样式进行清除。如：
div,span,table,tr,td,th,p,ul,ol {
margin: 0;
padding: 0;
}
3 内边距（ padding ）不影响盒子大小的情况
如果一个盒子没有设置 width 或 height 属性，或者这个盒子是从父元素那里继承过来的 width 或 height ，则在此盒子中设置内边距 padding 会使盒子有内边距的效果，但不会影响本盒子的大小。
4 内容（ content ）的高度和宽度
给盒子设置的高度 height 和宽度 width 属性是作用于盒子内容（ content ）上。
height 属性值
height 属性值 | 描述 | 实例 |
|---|---|---|
正数px | 设置盒子内容（ content ）的高度 | height: 100px; |
正数% | 设置相对于父元素 height 属性的百分比 | height: 80%; |
width 属性值
width 属性值 | 描述 | 实例 |
|---|---|---|
正数px | 设置盒子内容（ content ）的宽度 | width: 200px; |
正数% | 设置相对于父元素 width 属性的百分比 | width: 60%; |
5 盒子模型的总宽度和总高度
盒子总宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right
盒子总高度 = margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom
各位大佬，如果感觉本文章还不错的话，可否点个赞呀 ( ๑￣▽￣ʃ♡ƪ )
如有错误之处, 恳请留言, 定会及时改正
