5.5 - margin 概念与应用

margin 的相关属性

margin 用于设置四个外边距，其后面的参数可以是1-4个

div {
  /* 上右下左，缺省对称 */
  margin: 1px;                                /* 左 = 右 = 下 = 上 = 1px */
  margin: 1px 2px;                        /* 下 = 上 = 1px , 左 = 右 = 2px */
  margin: 1px 2px 4px;                /* 上 = 1px , 左 = 右 = 2px , 下 = 4px */
  margin: 1px 2px 4px 8px;        /* 上 = 1px , 右 = 2px , 下 = 4px , 左 = 8px */
}

margin 重叠（合并）问题

只会上下合并，不会左右合并

哪些情况会合并

• 父子 margin 合并
• 兄弟 margin 合并

  margin 合并的前提是 margin 之间什么都没有必须是邻接的，如果它们之间有一个 border 或 padding 就穿透了

如何阻止合并

• 父子合并用
  • padding / border 挡住
  • overflow : hidden 挡住，把看不见的隐藏
  • display：flex 挡住
• 兄弟合并是否是符合预期的，如果不需要兄弟合并可以用 inline-block 消除

  margin 负值的应用

  绝对定位元素的居中

  .element {
  width: 600px; 
  height: 400px;
  position: absolute; 
  /* 水平居中 */
  left: 50%; 
  margin-left: -300px;    /* 宽度的一半 */
  /* 垂直居中 */
  top: 50%;
  margin-top: -200px;    /* 高度的一半 */
  }

  去除等距列表右侧 margin

  .list{
    /* 无关代码 */
    margin-right: -10px;
        /* 无关代码 */
  }
  .list li{
    /* 无关代码 */
    margin-right: 10px;
      /* 无关代码 */
  }

  margin 还有很多特性并未整理，参考文章：

  外边距重叠 - MDN CSS margin 的相关属性，问题及应用 - 张鑫旭 CSS margin 合并问题 - 前端下午茶 小 tip : margin : auto 实现绝对定位元素的水平垂直居中 - 张鑫旭