HTML中<a>标签margin表现异常问题求助

这是CSS中块级元素垂直外边距合并的典型问题——当父元素没有任何能阻断外边距合并的属性（比如边框、内边距、BFC触发属性）时，子元素的垂直外边距会和父元素的外边距合并，导致你设置给<a>的margin-top实际上作用到了外层的<div>上，看起来像是div被移动了。

以下几种方法都能解决这个问题：

1. 给父元素触发BFC（块格式化上下文） #

给.first添加overflow: hidden属性，BFC内部的元素不会和外部产生外边距合并：

.first {
  color: black;
  width: 300px;
  height: 300px;
  background: cyan;
  overflow: hidden; /* 触发BFC */
}

a {
  margin: 100px;
  display: block;
}

2. 给父元素添加边框或内边距 #

给父元素加一个透明边框或者微小的内边距，阻断子元素和父元素的外边距合并：

.first {
  color: black;
  width: 300px;
  height: 300px;
  background: cyan;
  border-top: 1px solid transparent; /* 透明边框阻断合并 */
  /* 或者用内边距：padding-top: 1px; */
}

a {
  margin: 100px;
  display: block;
}

3. 用父元素的内边距替代子元素的外边距 #

调整布局逻辑，把给<a>设置的margin换成给父元素设置padding，同样能达到预期的间距效果：

.first {
  color: black;
  width: 300px;
  height: 300px;
  background: cyan;
  padding: 100px; /* 用父元素内边距替代子元素外边距 */
  box-sizing: border-box; /* 可选，避免内边撑大父元素宽度 */
}

a {
  display: block;
  /* 去掉子元素的margin */
}

内容的提问来源于stack exchange，提问作者Rahul Singh