调整.box的margin时顶部出现白线，侧边栏异常问题求助

兄弟，你碰到的是CSS里超常见的**外边距塌陷（Margin Collapse）**问题，我来给你拆解一下原因和解决办法：

一、问题根源分析 #

1. 页面顶部白线 #

你的.box是.sectionbox的子元素，而.sectionbox没有设置border、padding或者overflow这类能分隔子元素外边距的属性，这就导致.box的margin-top会“穿透”父元素，和父元素的外边距合并——因为.sectionbox本身没有margin-top，这个合并后的外边距就直接作用在body上，让页面顶部出现了和.box的margin长度一致的空白。

2. 侧边栏顶部白线 #

你重置了div、span等元素的默认样式，但没包含h2！浏览器给h2默认设置了margin-top，而你的#sidemenu同样没有能阻止外边距塌陷的属性，所以h2的margin-top会让它自己往下偏移，#sidemenu的顶部就露出了空白（因为#sidemenu的背景只覆盖自身内容区域，不包含子元素的外边距）。

二、具体解决办法 #

针对页面顶部白线（.box & .sectionbox） #

你可以选下面任意一种方案：

• 触发BFC阻止塌陷：给.sectionbox添加overflow: hidden

.sectionbox {
  margin-left: 200px;
  overflow: hidden; /* 新增此行 */
}

• 用内边距分隔：给.sectionbox加顶部内边距

.sectionbox {
  margin-left: 200px;
  padding-top: 1px; /* 新增此行，1px即可分隔，不影响布局 */
}

• 用边框分隔：给.sectionbox加透明顶部边框

.sectionbox {
  margin-left: 200px;
  border-top: 1px solid transparent; /* 新增此行 */
}

针对侧边栏顶部白线（#sidemenu & h2） #

直接移除h2的默认上外边距：

#sidemenu h2 {
  list-style: none;
  display: block;
  padding-left: 52px;
  color: #ccc;
  font: 30px "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
  margin-top: 0; /* 新增此行，清除默认margin-top */
}

这样处理后，不管你怎么调整.box的margin值，页面顶部都不会再出现白线，侧边栏也能保持100%高度且无空白啦。

内容的提问来源于stack exchange，提问作者Ivan Sim