如何在不移除<p>标签的情况下合并HTML中的段落内容

<p>标签默认是块级元素，浏览器会自动为它添加换行和上下外边距，要在保留标签的前提下让内容同行显示，修改它的CSS样式即可，下面是两种可行方案：

方案一：设置为行内元素（inline） #

给<p>标签添加display: inline;样式，同时可去掉默认上下外边距避免多余间距，还能手动加右侧间距让段落间更美观：

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            display: inline;
            margin: 0; /* 移除默认上下边距 */
            margin-right: 8px; /* 段落间添加小空格，可选 */
        }
    </style>
</head>
<body>

<h1>The p element</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

方案二：设置为行内块元素（inline-block） #

如果需要保留<p>标签的块级特性（比如后续要设置宽高），可以用display: inline-block;，同样可调整间距：

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            display: inline-block;
            margin: 0;
            margin-right: 8px;
        }
    </style>
</head>
<body>

<h1>The p element</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

修改后运行结果：

The p element
This is a paragraph. This is a paragraph. This is a paragraph.

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