HTML段落标签即p标签，是专门用于定义文本段落的语义化标签，在网页内容排版中承担着区分不同文本块的重要作用，合理运用p标签可以让页面结构更清晰，也利于搜索引擎识别内容层次。
p标签的基础用法
p标签属于块级元素，每个p标签会默认独占一行，浏览器会自动在段落前后添加一定的外边距，不需要开发者手动添加换行符。基础的使用方式非常简单，只需要将需要作为段落的文本放在<p>和</p>标签之间即可。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>p标签基础示例</title>
</head>
<body>
<p>这是第一个段落内容，用于演示p标签的基本使用方式。</p>
<p>这是第二个段落内容，和第一个段落会自然分隔开。</p>
</body>
</html>p标签的默认样式表现
不同浏览器对p标签的默认样式设置略有差异，但绝大多数浏览器都会给p标签设置上下外边距，通常默认的上外边距和下外边距都是1em左右，这个间距会让相邻两个段落之间自动产生明显的分隔效果，不需要开发者额外添加分隔元素。
需要注意p标签内部不能嵌套其他块级元素，比如不能在p标签内部再放div、h1等块级标签，如果强行嵌套，浏览器解析时可能会自动闭合p标签，导致页面结构不符合预期。
通过CSS控制段落间距的技巧
如果默认的段落间距不符合页面设计需求，可以通过CSS来自定义调整，常用的控制方式有以下几种：
1. 调整外边距控制间距
可以通过设置p标签的margin属性来调整段落之间的间距，比如想要增大段落之间的间距，可以设置上下外边距的值。
/* 增大段落上下间距 */
p {
margin-top: 20px;
margin-bottom: 20px;
}
/* 也可以简写为 */
p {
margin: 20px 0;
}2. 调整行高控制段落内部行间距
如果段落文本有多行，想要调整行与行之间的距离，可以设置line-height属性，这个属性不会影响段落之间的间距，只会调整段落内部文本的行间距。
/* 设置段落内部行高为字体大小的1.5倍 */
p {
line-height: 1.5;
}3. 结合相邻选择器精准控制
如果只想调整相邻两个p标签之间的间距，不需要影响页面其他元素的间距，可以使用相邻兄弟选择器来设置。
/* 只调整相邻p标签之间的上间距 */
p + p {
margin-top: 30px;
}使用p标签的常见注意事项
- p标签是语义化标签，不要仅仅为了换行效果而使用p标签，换行可以使用<br>标签，p标签的核心作用是定义文本段落。
- 不要在p标签内部放置图片、表单元素等行内块元素时破坏段落的语义结构，如果需要在段落内嵌这些元素，要确认符合内容逻辑。
- 调整段落间距时，优先使用margin属性，不要使用空的p标签来充当间距元素，这种方式不符合语义化规范，也不利于代码维护。
常见问题解答
p标签和div标签有什么区别？
p标签是语义化的段落标签，默认带有上下外边距，专门用于包裹文本段落；div标签是无语义的块级容器，默认没有外边距，更多用于页面布局划分，两者使用场景完全不同。
为什么设置了p标签的margin还是没有间距？
可能是其他CSS样式覆盖了p标签的margin设置，或者父元素设置了overflow:hidden等属性导致外边距折叠，可以通过浏览器开发者工具检查样式的优先级和继承情况来排查问题。
HTML_paragraph_tagtext_spacingHTML_basic_tagsfront-end_development修改时间：2026-06-03 22:29:24