外边距样式属性:margin
margin-top样式属性:设置元素的上外边距
margin-bottom样式属性:设置元素的下外边距
margin-left样式属性:设置元素的左外边距
margin-right样式属性:设置元素的右外边距
margin样式属性:用于在一个声明中设置所有外边距的宽度,或者设置各边上外边距的宽度。margin属性可以有一个到四个:
一个:设置上下左右的外边距
两个:第一个为上下,第二个为左右
三个:第一个为上边距,第二个为左右边距,第三个为下边距
四个:按顺时针顺序,即上右下左
/margin:0 auto;/——水平居中显示
/margin:0;/取消浏览器为HTML文档中各标签设置的margin默认值,方便后面设置
块级元素的垂直相邻外边距会合并(即外边距合并),合并后的外边距间距等于两个外边距高度中的较大者(例子);行内元素实际上不占上下外边距;行内元素的的左右外边距不会合并(例子);浮动元素的外边距也不会合并;
示例:
/*margin-left: 50px;
margin-right: 50px;*/
/*margin: 50px;/*上下左右均为50px*/
/*margin: 10px 50px;上下 左右*/
/*margin: 10px 50px 50px;上 左右 下*/
margin: 10px 50px 10px 50px;/*顺时针,上右下左*/
padding样式属性:内边距样式属性
padding-top样式属性:设置元素上内边距的宽度
注意:行内非替换元素上设置的上内边距不会影响行高计算,因此,如果一个元素既有内边距又有背景,从视觉上看可能延伸到其他行,有可能还会与其他内容重叠;
padding-right样式属性:设置元素右内边距的宽度
注意:行内非替换元素上设置的右内边距仅在元素所生成的第一个行内框的右边出现。
padding-bottom样式属性:设置元素下内边距的宽度
注意:行内非替换元素上设置的下内边距不会影响行高计算,因此,如果一个元素既有内边距又有背景,从视觉上看可能延伸到其他行,有可能还会与其他内容重叠;
padding-left样式属性:设置元素左内边距的宽度
注意:行内非替换元素上设置的左内边距仅在元素所生成的第一个行内框的左边出现。
padding样式属性:在一个声明中设置元素所有内边距的宽度,或者设置各边上内边距的宽度,
padding属性可以有 1 到 4 个值:
一个即所有的边距,
两个分别为上下 左右
三个为上 左右 下
四个为顺时针顺序:上 右 下 左
*{padding:0;}——取消浏览器为HTML文档中各标签设置的padding默认值,方便后面设置
行内非替换元素上设置的内边距不会影响行高计算,因此如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠;元素的背景会延伸穿过内边距;
示例:
/*padding-left: 20px;/*设置内部元素距离边框的距离
padding-top: 20px;
padding-right: 20px;
padding-bottom:20px;*/
/*padding: 50px;*/
/*padding: 10px 50px; 上下 左右
padding: 5px 100px 50px; 上 左右 下*/
padding: 5px 10px 50px 50px;