求助：我的div顶部出现多余空白，已尝试margin-top:0仍未解决

我懂你这种头疼的情况——明明已经把html和body的margin、padding都清零了，div顶部还是莫名出现空白！这种问题十有八九是块级元素的外边距折叠搞的鬼，或者是你没注意到的子元素默认样式在捣乱，下面给你几个针对性的解决办法：

1. 先排查子元素的默认外边距 #

如果你的div.ti里面包含了<p>、<h1>这类标签，它们天生自带margin-top属性，这个外边距会“穿透”父div，看起来就像是div自己顶部有空白。解决起来很简单：

• 直接给子元素重置margin：

div.ti p, div.ti h1 {
  margin-top: 0;
}

• 或者给父div触发BFC（块级格式化上下文），彻底阻止外边距折叠，这种方法更通用，不会影响子元素的样式：

div.ti {
  display: flow-root; /* 现代浏览器推荐用这个，不会隐藏溢出内容 */
  /* 旧浏览器可以用 overflow: hidden; 但要注意如果子元素有溢出会被截断 */
}

2. 额外处理浏览器默认样式的小细节 #

有时候光清零html和body的margin/padding还不够，可以给body加一行line-height: 1;，避免默认行高带来的隐性空间：

body {
  font: 22px trebuchet ms;
  line-height: 1; /* 新增这行 */
}

3. 检查代码里的空白文本节点 #

如果你的HTML代码里，div和子元素之间有换行或空格，浏览器会把这些解析成空白文本节点，尤其是当div用了inline-block这类布局时，也可能产生间隙。可以试试：

• 把div内部的元素紧挨着写（比如<div class="ti"><p>内容</p></div>）
• 或者给父div设置font-size: 0，再给子元素重置回需要的字号：

div.ti {
  font-size: 0;
}
div.ti * {
  font-size: 22px; /* 这里改成你需要的字号 */
}

给你补全的测试代码 #

我把你的代码补全并加上了修复方案，你可以直接测试：

<html>
<head>
<style>
html, body { 
  padding: 0px; 
  margin: 0px; 
} 
body { 
  font: 22px trebuchet ms; 
  line-height: 1; /* 解决行高带来的隐性空间 */
} 
button { 
  color: white; 
  font: 18px verdana; 
  background-color: #aef731; 
  border-style: solid; 
  border-bottom-color: #96d626; 
  border-width: 0px; 
  border-bottom-width: 7px; 
  border-radius: 12px; 
  padding: 5px; 
} 
button:active { 
  border-bottom-width: 0px; 
  position: relative; 
  top: 7px; 
} 
button:focus { 
  outline: none; 
}
/* 修复div顶部空白的核心代码 */
div.ti {
  display: flow-root;
}
div.ti p {
  margin-top: 0;
}
</style>
</head>
<body>
<div class="ti">
  <p>测试内容</p>
  <button>点击按钮</button>
</div>
</body>
</html>

你可以先试试触发BFC的方法，这应该能解决大部分情况，如果还是不行，再检查一下是不是子元素的其他样式或者代码里的空白节点导致的~

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