资源描述：
《css中margin属性详细分析》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、Css中margin属性详细解析写css，你少不了与margin打交道。你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？……Margin是什么CSS边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School边界，元素周围生成额外的空白区。“空白区”通常是指其
2、他元素不能出现且父元素背景可见的区域。——CSS权威指南我比较喜欢使用“外边距”这个词来解释margin（同理padding可以称之为“内边距”，但是我又恰恰喜欢称呼padding为“补白”或者“留白”），我们可以很清楚的了解到margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。Margin的特性margin始终是透明的。margin通过使用单独的属性，可以对上、右、下、左的外边距进行设置。即：margin-top、margin-right、margin-bottom、margin-left。外边距的margin-width的值类型有：auto
3、len
4、gth
5、percentage。也可以使用简写的外边距属性同时改变所有的外边距：margin:toprightbottomleft;(eg:margin:10px20px30px40px)记忆方式是元素周围正上方顺时针“上右下左”记忆。并且规范还提供了省略的数值写法，基本如下：1.如果margin只有一个值，表示上右下左的margin同为这个值。例如：margin:10px;就等于margin:10px10px10px10px;2.如果margin只有两个值，第一个值表示上下margin值，第二个值为左右margin的值。例如：margin:10px20px;就等于margin:10p
6、x20px10px20px;3.如果margin有三个值，第一个值表示上margin值，第二个值表示左右margin的值，第三个值表示下margin的值。例如：margin:10px20px30px;就等于margin:10px20px30px20px;4.如果margin有四个值，那这四个值分别对应上右下左这四个margin值。例如：margin:10px20px30px40px;在实际应用中，个人不推荐使用三个值的margin，一是容易记错，二是不容易日后修改，一开始如果写成margin:10px20px30px;日后需求改动为上10px，右30px，下30px，左20px，你不
7、得不还是得把这个margin拆开为margin:10px30px30px20px;费力且不讨好，不如一开始就老老实实的写成margin:10px20px30px20px;来的实在，不要为了现在节省俩个字节而让日后再次开发的成本上升。垂直外边距合并问题别被上面这个名词给吓倒了，简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。你可以查看W3ShoolCSS外边距合并了解这个基本知识。实际工作中，垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏
8、览器下(FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”，标准浏览器下查看出现“bug”)：010203垂直外边距合并040910 1112
