HTML：p，一个有陷阱的元素

￡神魔★判官ぃ 2022-02-15 11:24 121阅读 0赞

> <p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p> 是块级元素。

在HTML中<p>`元素`是表示段落，主要用于文章分段时使用，如果一定要用<p>标记在布局上，也没有错误，但必须要知道它的陷阱，不然会带来一些意想不到的布局问题。

### 示例代码： ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HTML：p，一个有陷阱的元素</title>
        <style type="text/css">
            body{
                font-size: 14px;
                margin: 0;
                padding: 0;
                font-family: "Helvetica", "Microsoft YaHei", sans-serif;
                color: #fff;
            }
            div{
                padding: 10px;
                background-color: #09BB07;
            }
            p{
                padding: 10px;
                background-color: #f0ad4e;
                margin: 0 0 10px 0;
            }
        </style>
    </head>
    <body>
        <p><span>helang.love@qq.com</span></p>
        <p><div>1846492969</div></p>
    </body>
    </html>

### 示例图： ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70][] ###

在示例代码中，<div>元素并没属于<p>子元素，还多出了一组<p>标记，导致出现了图示的错误样式。

在 MDN web docs 有写到“使用CSS margin属性去改变段落之间的间隙，不要在段落之间插入空的段落元素或者<br>元素。”，经测试，<br>标记并未引起明显的问题，但是<p>标记中不允许有块元素出现，如<p>、<div>、<h1>等。通过css将元素修改为非块级元素也是不可取的，因为浏览器在解析页面时，先是解析DOM节点后才会计算CSS属性的。

小编建议：<p>是使用于文章中表示分段，如果在不能确定内容中不出现块元素时，尽量不要使用<p>标记，以免带来不必要的布局问题的。在页面布局时更不要使用<p>元素，尽量使用<div>这类没有语义的标记做页面布局。

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ### ![20190512094840637.jpg][] ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70]: /images/20220215/72709cba64c4490a88b75b2945038df4.png
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220215/12004fa3efb4456d9d3fea1e21c4eddc.png