HTML中p段落间距调整 HTML中p标签嵌套限制规则解析-html教程-PHP中文网

改了margin-bottom段落仍挤在一起，是因为浏览器默认给p设了上下外边距且相邻p的垂直外边距会折叠（取较大值而非相加）；应只设margin-bottom、避免上下同设，并用overflow:hidden等触发bfc防止合并。

html中p段落间距调整 html中p标签嵌套限制规则解析

为什么改了 `margin-bottom` 段落还是挤在一起？

因为浏览器默认给 p 同时设了 margin-top 和 margin-bottom（通常各 1em），但相邻 p 的垂直外边距会合并——不是相加，而是取较大值。比如两个 p 都设 margin-bottom: 20px，实际间距仍是 20px，不是 40px。

真正可控的做法是只设 margin-bottom，让第一个段落顶着上文，避免顶部意外留白；同时确保父容器不触发 margin 合并干扰（如用 overflow: hidden 或 display: flow-root 包一层）。

别写 p { margin: 16px 0; } —— margin-top 在首段容易造成顶部空隙
移动端 WebView（尤其旧 Android）可能忽略 em 计算，关键布局建议兜底写 margin-bottom: 16px
用 rem 单位更利于缩放，但需确认根字体大小是否稳定（html { font-size: 16px; }）

`p` 标签里能不能放 `div`？

不能。HTML 解析器遇到 <p></p> <div>...</div>

会立刻自动闭合 p，实际 DOM 变成

<p></p>
<div>...</div>

。这不是样式问题，是解析规则强制修正。

后果很实在：document.querySelector('p div') 永远返回 null；CSS 选择器如 p > div 完全不生效；JS 操作节点位置也会错乱。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

p 只允许 phrasing content：比如 em、strong、a、img、time、button（注意：button 是合法的）
禁止放入任何 flow content：包括 div、section、ul、h2、table、form
想实现“段落内有区块布局”，应改用语义正确结构，例如：<p>文字</p> <div class="block-after-paragraph">内容</div>

用 `line-height` 调整段落间距行不行？

不行。line-height 控制的是单个 p 内部的行与行之间距离，和段与段之间的空白完全无关。设 line-height: 1.2 只会让多行文字更紧凑，不会让两个 p 离得更近或更远。

但它会影响可读性，尤其在中文排版或地址、诗歌等换行密集的场景。数值无单位时（如 1.6）是相对于当前 font-size 的倍数，比用 px 更健壮。

段落间距离必须靠 margin（推荐只用 margin-bottom）
line-height 和 margin 是正交控制，互不影响盒模型计算
设 line-height: 1 容易让文字挤成一团，1.4–1.7 是较安全的阅读范围

怎么安全地重置所有 `p` 的默认间距？

直接全局覆盖比依赖用户代理样式更可靠。但要注意两点：一是避免用通配符 * { margin: 0; }（会干掉所有元素的默认边距，包括 h1、ul 等）；二是别漏掉 margin 合并这个隐形变量。

推荐写法：p { margin: 0 0 1.5rem 0; }，然后按需加类（如 class="lead"）微调特定段落。若需首段贴顶、末段去底，可用伪类：p:first-child { margin-top: 0; }、p:last-child { margin-bottom: 0; }——但注意 IE8 不支持，需降级处理。