CSS样式属性margin,padding详解

盒模型基本属性有两个:padding和margin。

以边框border为界,边框里面是内边距,边框外面是外边距。
在这里插入图片描述

一.外边距margin:

外边距是指边框以外与其他同级元素之间的距离,外边距可以控制同级元素之间的距离( 用于设置同级标签的间距)。
1.margin的复合式写法:

margin:10px;(表示元素上下左右外边距都是10px)

margin:10px 10px;(表示元素上下外边距是10px,左右外边距是10px)

margin:10px 10px 10px;(表示元素上外边距是10px,左右外边距是10px,下外边距是10px)

margin:10px 10px 10px 10px;(表示元素上外边距是10px,右外边距是10px,下外

边距是10px,左外边距是10px)
2.margin的分开式写法:

margin-top: 10px;(表示元素上外边距是10px)

margin-right: 10px;(表示元素右外边距是10px)

margin-bottom: 10px;(表示元素下外边距是10px)

margin-left: 10px;(表示元素左外边距是10px)

3.margin:0 auto;——水平居中显示。
4.*{margin:0;}——取消浏览器为HTML文档中各标签设置的margin默认值,方便后面设置。
5.块级元素的垂直相邻外边距会合并(即外边距合并),合并后的外边距间距等于两个外边距高度中的较大者(例子);行内元素实际上不占上下外边距;行内元素的的左右外边距不会合并(例子);浮动元素的外边距也不会合并;

二.内边距padding:

声明中设置元素内边距的宽度,或者设置各边上内边距的宽度
1.padding的复合式写法:

padding:10px;(表示元素上下左右内边距都是10px)

padding:10px 10px;(表示元素上下内边距是10px,左右内边距是10px)

padding:10px 10px 10px;(表示元素上内边距是10px,左右内边距是10px,下内边距是10px)

padding:10px 10px 10px 10px;(表示元素上内边距是10px,右内边距是10px,下内

边距是10px,左内边距是10px)

2.padding的分开式写法:

padding-top: 10px;(表示元素上内边距是10px)

padding-right: 10px;(表示元素右内边距是10px)

padding-bottom: 10px;(表示元素下内边距是10px)

padding-left: 10px;(表示元素左内边距是10px)
3.*{padding:0;}——取消浏览器为HTML文档中各标签设置的padding默认值,方便后面设置.
4.行内非替换元素上设置的内边距不会影响行高计算,因此如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠;元素的背景会延伸穿过内边距;


版权声明:本文为bravery__原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。