你不知道的margin

标签：前端   margin   

今天记录一下我对margin的认识吧，方便以后复习。

margin 属性设置元素的外边距。

什么是外边距？ 看一下CSS的盒子模型你就清楚了。

边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

我觉得比较恰当的比喻是房子，房间里面有个element,它跟墙壁的距离就是padding。 墙壁的厚度就是border。 房子之间的距离就是margin。

所以margin 注重的是两个不相干元素的间距。
而padding 描述子元素和父容器之间的留白。

margin的理解误区

• margin 值为百分比

margin-top 为百分比时，实际上它是按照父容器的宽度的百分比来调节的...
‘margin-top‘, ‘margin-bottom‘
Percentages: refer to width of containing block
坑了我很久的问题。

• margin 块级元素的垂直外边距

当你两个相邻块级元素都设置了margin: 20px时，他们的垂直间隔不是40px,而是20px。 这个间隔是根据两者中的较大值来判断的，比如房主A要求其他房子至少距离我20px，而房主B说，我的要求比较低，只要距离我10px就行，那么他们的间隔就是20px,不然A会很不爽的e。

但是注意这里只针对块级元素（display:block）,而行内元素(display:inline)不占据上下外边距，行内元素的左右外边距不会被合并。 行内块元素（display:inline-block）的上下外边距也不会被合并

• margin-top
  

有一次使用margin-top,发现了个奇葩的问题。当我设置块element（display:block）margin-top的时候，它把整个页面都给挤下去了...

那么那些以body 为父容器的，position : absoulte的就全都要下移。解决方法是，对加了margin-top的第一个元素的父容器添加一个overflow:hidden 或者 padding-top~;

• margin 值为负
  

margin值设为负值的时候，会产生很多视觉上的假象。
推荐阅读： 我知道你不知道的负Margin——海玉

你不知道的margin

标签：前端   margin   

原文地址：http://blog.csdn.net/joueu/article/details/44872591