如何减少包含三个<p>的<div>边框内首个<p>上方的留白？

开发者阿泽

2026-5-22

解决

内第一个

顶部留白的问题

嘿，这个问题其实挺常见的——根源在于浏览器给

元素默认设置了margin（尤其是margin-top和margin-bottom）。当你把多个

放进带边框的

里时，第一个

的默认margin-top会和

的padding叠加，就出现了你看到的顶部留白；而单独给

加边框时，margin是在边框外面的，所以边框会紧紧贴着

的内容，自然没有这个问题。

给你两个简单的解决方案，按需选择：

方案一：精准移除第一个
的顶部margin（推荐）

直接用CSS伪类:first-child选中

里的第一个

，把它的margin-top设为0，这样既保留了段落之间的正常间距，又能让第一个

和

的顶部边框紧密贴合：

#animal-info {
  max-width: 256px;
  padding: 8px;
  font-size: 15px;
  border: 1px solid lightgrey;
  border-radius: 5px;
}

/* 新增这行代码 */
#animal-info p:first-child {
  margin-top: 0;
}

方案二：全局调整
内
的margin（适合统一样式场景）

如果希望所有

在这个

里的上下margin更紧凑，也可以直接重置

内所有

的margin，再手动设置段落之间的间距：

#animal-info {
  max-width: 256px;
  padding: 8px;
  font-size: 15px;
  border: 1px solid lightgrey;
  border-radius: 5px;
}

#animal-info p {
  margin: 0;
  margin-bottom: 16px; /* 自定义段落之间的间距 */
}

/* 可选：如果之后在意底部留白，可移除最后一个<p>的底部margin */
#animal-info p:last-child {
  margin-bottom: 0;
}

第一种方案更灵活，完全符合你“只解决顶部留白，不在意底部”的需求，不会打乱段落之间的默认排版。

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

相关产品推荐

方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)，限时 9.9 元起

产品介绍相关文档

火山引擎最新活动