margin

margin

外边距

  取值顺序一般是上、右、下、左

/* 上10 右5 下15 左20 */
div{
  margin:10px 5px 15px 20px;
}
/* 上10 右5 下15 左5 */
div{
  margin:10px 5px 15px;
}
/* 上10 右5 下10 左5 */
div{
  margin:10px 5px;
}
/* 都是10 */
div{
  margin:10px;
}

margin的特性

块级元素的垂直相邻外边距会合并

  外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并允许指定负的外边距值,不过使用时要小心

  外边距合并的取值:合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。如果发生合并的外边距不全是正值,则会拉近2个块级元素的垂直距离,甚至会发生重叠现象

发生的场景

  • 当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。
  • 当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。
  • 外边距甚至可以与自身发生合并

解决的方案

  • 为父元素设置padding
  • 为父元素或子元素设置border
  • 在子元素前加入一个不是空的元素
  • 为父元素或子元素声明浮动或者绝对定位
  • 为父元素应用overflow:hidden属性(推荐)

  转载请注明: 迷一样的自信 margin

 上一篇
BFC、IFC、GFC、FFC BFC、IFC、GFC、FFC
BFC、IFC、GFC、FFCBFC概念(BFC)  "块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相
2018-04-13
下一篇 
methods methods
方法的不兼容Date  解决IE、firefox浏览器下JS的new Date()的值为Invalid Date、NaN-NaN的问题 所有浏览器支持的格式 new Date(2011, 01, 07); // yyyy, mm-1,
2018-04-06
  目录