cssmargin外边距外间距即div与div间距

《cssmargin外边距外间距即div与div间距》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、CSSmargin外边距外间距即div与div间距CSS 外边距，div与div间距设置基础之cssmargin DIVCSSmargin外边距外补白边距样式属性margin用于设置对象标签之间距离间隔，比如2个上下排列的DIV盒子，我们就可以使用margin样式实现上下2个盒子间距。Margin呈现是位于对象边框外侧，紧贴于边框，marign与padding位置却相反csspadding却是紧贴边框位于边框内侧。目录1.margin语法与应用结构2.cssmargin缩写简写3.常用的margin样式4.cssmargin用

2、法案例5.cssmargin总结一、margin基础语法与结构  DIVCSS外边距指CSS属性单词margin，margin是设置对象四边的外延边距，没有背景颜色也无颜色。1、margin语法Margin:10pxMargin的值是数字+html单位，同时也可以为auto（自动、自适应）2、应用结构Div{margin:10px}设置div对象四边间距为10px3、Margin说明margin是设置对象外边距外延边距离。margin的值有三种情况，可以为正整数和负整数并加单位如PX像素（margin-left:20px）；可

3、以为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;下边外延

4、距离5px）常见margin使用场景4、margin实际应用地方两个布局之间距离设置。如上图中“CSS手册”和“DIVCSS研教室”黄颜色的背景之间空隙（背景土红）。二、cssmargin缩写简写 margin属性CSS样式，如遇到上下、左右、上下左右等情况我们可以缩写简写优化。你可能需要了解：CSS优化-CSS压缩：http://www.divcss5.com/jiqiao/j97.shtml你可能需要了解：HTML优化-HTML代码优化压缩：http://www.divcss5.com/jiqiao/j326.shtml1

5、、只有上下情况缩写原始：margin-top:5px;margin-bottom:6px缩写简写为：margin:5px06px0或margin:5pxauto6pxauto2、只有左右情况缩写原始：margin-left:5px;margin-right:6px缩写简写为：margin:06px05px或margin:auto6pxauto5px3、只有三边情况缩写原始：margin-top:5px;margin-bottom:6px;margin-left:4px缩写：margin:5px06px4px或margin:5p

6、xauto6px4px4、四边相同值缩写原始：margin-top:5px;margin-bottom:5px;margin-left:5px;margin-right:5px缩写：margin:5px;5、四边不同值缩写原始：margin-top:5px;margin-bottom:6px;margin-left:7px;margin-right:8px缩写：margin:5px8px6px7px;6、四边其中上下值和左右值各相同缩写上下相同、左右相同原始：margin-top:5px;margin-bottom:5px;m

7、argin-left:7px;margin-right:7px缩写：margin:5px7px;Margin简写分析图：cssdiv margin样式简写语法应用分析图三、常用的margin样式 1、用margin设置对象盒子间距我们常用margin设置2个盒子之间距离，无论上下左右的距离我们均可以利用margin实现间隔。实际可用margin地方示图2、利用margin实现布局居中，基础单词：marign:0auto;即可实现对象居中，但需要一个条件，那就是该对象上级一定要设置text-align:center内容居中属性样

8、式。有的浏览器body标签不设置text-align:center内容居中样式，其下级包含对象设置了margin:0auto也会让其布局居中，但为了兼容各大浏览器建议对body设置一个text-align:center属性样式，这里divcss5提供一个css初始化模板为DI