CSS技术问询：如何消除两个<div>元素之间的恼人间距

嘿，刚入门网页设计遇到这种小问题太正常啦！我来帮你搞定这个恼人的间距——大概率是浏览器给<p>标签加的默认样式搞的鬼，下面给你几个简单直接的解决办法：

为什么会出现这个间距？ #

浏览器会给很多HTML元素预设默认样式，比如<p>标签自带上下外边距（margin）。当两个<div>里的<p>相邻时，它们的外边距会发生“叠加”，看起来就像是两个<div>之间多出了间距。

具体解决方法 #

方法一：直接清除<p>标签的默认外边距 #

这是最快的办法，在你的index.css里添加这段代码：

p {
  margin: 0;
}

如果不想影响页面里其他<p>标签，也可以只针对这几个section里的段落设置：

#Section1 p, #Section2 p, #Section3 p {
  margin: 0;
}

方法二：用<div>的内边距代替<p>的外边距 #

要是你希望段落文字和<div>边框之间保留一些空间，可以这么做：

/* 给所有section div加内边距，数值按需调整 */
#Section1, #Section2, #Section3 {
  padding: 8px;
}
/* 清除p标签的默认外边距 */
p {
  margin: 0;
}

方法三：全局重置默认样式（适合长期项目） #

如果以后还会遇到各种默认样式的坑，可以用全局重置来统一处理，一次性清除所有元素的默认边距和内边距：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

box-sizing: border-box还能让元素的宽高计算更符合直觉，避免内边距撑大元素的情况。

小技巧 #

你可以按F12打开浏览器的开发者工具，选中那个间距区域，查看是哪个元素的margin在起作用，这样就能更精准地调整啦！

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