如何消除HTML元素间的间隙？新手footer与div间隙求助

你遇到的是CSS里常见的外边距折叠问题，不用全局重置所有元素的margin和padding（这种操作确实会打乱现有布局），针对性处理就行，给你几个靠谱的解决方案：

方案1：清除关键元素的默认外边距 #

浏览器会给<p>、<a>等元素加默认的margin/padding，你可以精准清除这些元素的多余间距：

/* 清除bottom-container里最后一个p标签的底部外边距 */
.bottom-container p {
  margin-bottom: 0;
}
/* 清除footer里a标签的默认样式，同时避免行内元素的间距 */
footer a {
  margin: 0;
  /* 如果a标签是换行显示，加display:block消除行内元素的默认间距 */
  display: block;
}

方案2：用padding/border打断外边距折叠 #

外边距折叠只会发生在没有分隔的块级元素之间，给容器加个极小的padding或border就能打断这个机制，不会影响视觉效果：

/* 给bottom-container加个底部内边距，不用太大，1px就行 */
.bottom-container {
  padding-bottom: 1px;
}

或者给footer加顶部内边距：

footer {
  padding-top: 1px;
}

方案3：触发BFC（块级格式化上下文）打断折叠 #

给bottom-container设置overflow: hidden可以触发BFC，彻底解决外边距折叠问题：

.bottom-container {
  overflow: hidden;
}

小技巧 #

用Chrome开发者工具定位间隙来源：右键点击间隙区域，选择「检查」，在Elements面板的「Box Model」里可以直观看到是哪个元素的margin/padding导致的间隙，精准修改就行。

内容的提问来源于stack exchange，提问作者Matthew Osborne