css margin外边距外间距 即div与div间距.doc

CSS margin外边距外间距即div与div间距
CSS 外边距,div与div间距设置基础之css margin DIV CSS margin外边距外补白边距样式属性 margin用于设置对象标签之间距离间隔,比如2个上下排列的DIV盒子,我们就可以使用margin样式实现上下2个盒子间距。Margin呈现是位于对象边框外侧,紧贴于边框,marign与padding位置却相反css padding却是紧贴边框位于边框内侧。
一、margin基础语法与结构
DIV CSS外边距指CSS属性单词margin,margin是设置对象四边的外延边距,没有背景颜色也无颜色。
1、margin语法
Margin:10px
Margin的值是数字+html单位,同时也可以为auto(自动、自适应)
2、应用结构
Div{margin:10px}
设置div对象四边间距为10px
3、Margin说明
margin是设置对象外边距外延边距离。
margin的值有三种情况,可以为正整数和负整数并加单位如PX像素
(margin-left:20px);可以为auto自动属性(margin-left:auto 自动);可以为百分比(%)值(margin-left:3%)。
Margin延伸(单独设置四边间距属性单词)
margin-left 对象左边外延边距(margin-left:5px; 左边外延距离5px) margin-right 对象右边外延边距(margin-right:5px; 右边外延距离5px)
margin-top 对象上边外延边距(margin-top:5px; 上边外延距离5px)
margin-bottom 对象下边外延边距(margin-bottom:5px; 下边外延距离5px)
常见margin使用场景
4、margin实际应用地方
两个布局之间距离设置。
如上图中“CSS手册”和“DIV CSS研教室”黄颜色的背景之间空隙(背景土红)。
二、css margin缩写简写 margin属性CSS样式,如遇到上下、左右、上下左右等情况我们可以缩写简写优化。
你可能需要了解:CSS优化-CSS压缩:iao/ 你可能需要了解:HTML优化-HTML代码优化压缩:
iao/
1、只有上下情况缩写
原始:margin-top:5px; margin-bottom:6px
缩写简写为:margin:5px 0 6px 0或margin:5px auto 6px auto
2、只有左右情况缩写
原始:margin-left:5px; margin-right:6px
缩写简写为:margin:0 6px 0 5px或margin:auto 6px auto 5px
3、只有三边情况缩写
原始:margin-top:5px; margin-bottom:6px; margin-left:4px
缩写:margin:5px 0 6px 4px或margin:5px auto 6px 4px
4、四边相同值缩写
原始:margin-top:5px; margin-bottom:5