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 却是紧贴边框位于边框内侧。目录 1. margin 语法与应用结构 2. css margin 缩写简写 3. 常用的 margin 样式 4. css margin 用法案例 5. css margin 总结一、 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-b