HTML中怎么让两个相邻块级元素没有间隙-html教程-PHP中文网

答案是margin和padding导致块级元素间隙，而非空白字符；需确认元素为真块级（如），再针对性重置margin/padding，font-size:0无效，overflow:hidden不解决根本问题。

html中怎么让两个相邻块级元素没有间隙

margin 和 padding 是造成相邻块级元素间隙的主因，不是“看不见的空格”——那是 inline-block 才会遇到的问题。先确认你面对的是真·块级元素（如 <div>、<code><p></p>、<h1></h1>），再动手。

为什么两个 `<div> 之间总有空隙<p>浏览器对部分块级元素（尤其是 <code><p></p>`、`<h1></h1>`–`<h6></h6>`、`<ul></ul>`、`<ol></ol>`）内置了默认 `margin`。例如 Chrome 中 `<p></p>` 默认有 `margin: 1em 0`，上下各留出约 16px 空白；`<h2></h2>` 同样带上下外边距。

这个间隙不是 HTML 换行导致的，删掉换行或加注释毫无作用

它和字体大小、基线对齐无关，`font-size: 0` 在这里完全无效

检查方式：打开 DevTools，选中元素，看 `Computed` 面板里 `margin-top` / `margin-bottom` 是否非零

最直接有效的清除方式：重置 `margin` 和 `padding`

不要只写 div { margin: 0; padding: 0; } —— 这会覆盖所有 <div> 的内边距和外边距，可能破坏已有布局。应该按需清除：<ul><li>若只是想让两个特定 <code><div> 紧贴，给后一个加 <code>margin-top: 0

若批量处理段落，用 p { margin: 0; } 或更安全的 p + p { margin-top: 0; }（只影响紧接在另一个

<p></p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
														src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
													<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>

后面的段落）

通用重置可写成：* { margin: 0; padding: 0; }，但必须放在 CSS 最前面，且要意识到它会影响所有元素（包括 <button></button>、<input> 等）