HTML/CSS疑问：添加h4元素后两个盒子为何出现垂直间隙？

嘿，这个问题其实是CSS里经典的**外边距折叠（Margin Collapse）**在搞事情，我来给你一步步讲明白：

1. 为什么加了h4就突然出现间隙？ #

浏览器里的<h4>这类标题元素，默认自带上下外边距（margin）——这是浏览器默认样式的设定。当你把h4放进.timeline-container之后，因为这个父容器既没有设置padding/border，也没有触发BFC（块级格式化上下文），子元素h4的顶部外边距就会“穿透”父容器，直接和上方.container的底部产生间距，看起来就像是两个盒子之间多出了间隙。

简单说就是：父容器没有任何能“挡住”子元素外边距的属性，导致子元素的margin直接作用在了父容器外面，和上方盒子形成了空隙。

2. 怎么让两个盒子依旧紧密贴合？ #

这里有几个实用的解决方案，你可以根据自己的布局需求选择：

方案一：清除h4的默认外边距 #

最直接的方式，把h4自带的margin去掉：

.timeline-container h4 {
  margin: 0;
}

这样h4没有了外边距，自然不会再产生穿透的间隙。

方案二：给父容器加个“屏障” #

给.timeline-container加一点点padding或者透明的border，就能阻止外边距折叠：

.timeline-container {
  height: 100px;
  width: 55%;
  background: rgb(0 150 255);
  padding-top: 1px; /* 或者用 border-top: 1px solid transparent; */
}

注意如果用padding的话，可能要调整父容器的高度（比如改成min-height），避免盒子整体高度超出预期。

方案三：触发父容器的BFC #

给.timeline-container添加能触发BFC的属性，让它形成独立的格式化上下文，就能把h4的margin限制在内部：

.timeline-container {
  height: 100px;
  width: 55%;
  background: rgb(0 150 255);
  overflow: hidden; /* 也可以用 display: flow-root; 或者 display: flex; */
}

BFC会切断外边距折叠的条件，h4的margin就只会在父容器内部生效，不会影响外部的布局。

内容的提问来源于stack exchange，提问作者Sam Huguet