您的位置:首页> 日志> 前端技术 正文
DTOP

[转]大家一起来学习margin

kenny | 2011年08月19日 |

>>收藏本文 已有 0条评论

相信大家在输出的过程中,一定会用到margin这个元素,除非你是不做输出的,当然,在不必要的情况下,我个人不太喜欢用,因为margin在ie6下有双边距的bug,一般情况下都是用到padding。但,不喜欢用,不等于不会用,在必要的情况下,我们还是要和margin的交道的。

既然要用到margin这个元素,当然我们要去了解它。什么叫margin?有什么特性?margin在实际工作中的用处是什么?padding和margin空间什么时候应用?一般margin在浏览下有什么bug?这些都需要深入去学习。


一、margin到底是何方神圣?

CSS 边距属性定义元素周围的空间。通过使用单独的属性,可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School

边界,元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南


上述解释有点通俗,简单来说,margin就是“外边距”的意思,相反,padding就是“内边距”,之样方便大家理解。


二、margin的特性

margin是透明的。

margin通过使用单独的属性,可以对上、右、下、左的外边距进行设置。即:margin-top、margin-right、margin-bottom、margin-left。

外边距的 margin-width 的值类型有:auto | length | percentage

也可以使用简写的外边距属性同时改变所有的外边距:margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 记忆方式是元素周围正上方顺时针“上右下左”记忆。

并且规范还提供了省略的数值写法,基本如下:

1、如果margin只有一个值,表示上右下左的margin同为这个值。例如:margin:10px; 就等于 margin:10px 10px 10px 10px;

2、如果 margin 只有两个值,第一个值表示上下margin值,第二个值为左右margin的值。例如:margin:10px 20px; 就等于 margin:10px 20px 10px 20px;

3、如果margin有三个值,第一个值表示上margin值,第二个值表示左右margin的值,第三个值表示下margin的值。例如:margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;

4、如果margin有四个值,那这四个值分别对应上右下左这四个margin值。例如:margin:10px 20px 30px 40px;


很多人写代码的时候,为了节约代码,会简写成这样:margin:10px 20px 30px(实际为margin:10px 20px 30px 20px)。不修改是好,但天下那有这么好的事,如果需要改动为上10px,右30px,下30px,左20px,那还是要折开margin:10px 30px 30px 20px。所以,个人喜欢刚开始的时候写完整,见人见智吧。