如何在WordPress中设置空<p>标签高度为0？无需JS/jQuery可行吗？

嘿，这个问题我太有共鸣了！WordPress自动插入的<p>标签确实是双刃剑——有时候省事儿，但空标签搞出来的多余空白真的烦死人。咱们分几种情况来解决，优先用不需要JS的方案：

其实不用折腾PHP或者JS，CSS就能精准处理空<p>标签。你只需要在主题的自定义CSS面板或者style.css文件里添加这段代码：

/* 处理完全空的<p>标签（无任何字符） */
p:empty {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 可选：处理包含空白字符（空格、换行）的空<p>标签 */
p:blank {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

解释下：p:empty会选中完全没有任何内容的段落标签，p:blank则能覆盖那些看似为空但实际有空格/换行的情况，!important是为了确保这段样式能覆盖WordPress默认的段落内外边距，彻底消除多余空白。

如果你想从输出层面直接干掉这些空标签，而不是靠样式隐藏，可以用WordPress的内容过滤钩子。把这段代码加到主题的functions.php文件里：

function remove_empty_paragraphs($content) {
    // 移除完全空的<p>标签
    $content = preg_replace('/<p>\s*<\/p>/i', '', $content);
    // 移除包含空白字符（空格、换行）的<p>标签
    $content = preg_replace('/<p>\s+<\/p>/i', '', $content);
    return $content;
}
// 给文章内容和摘要都加上过滤
add_filter('the_content', 'remove_empty_paragraphs');
add_filter('the_excerpt', 'remove_empty_paragraphs');

这个函数会在WordPress输出文章内容或摘要前，用正则表达式把所有空的<p>标签直接删除，从根源解决问题，不用再担心样式冲突。

要是因为某些限制必须用JS/jQuery，也可以这么实现。把这段代码加到主题的footer.php文件里（放在</body>标签之前）：

jQuery(document).ready(function($) {
    // 处理完全空的<p>标签
    $('p:empty').css({
        'height': '0',
        'margin': '0',
        'padding': '0'
    });

    // 处理包含空白字符的空<p>标签
    $('p').filter(function() {
        return $.trim($(this).text()) === '';
    }).css({
        'height': '0',
        'margin': '0',
        'padding': '0'
    });

    // 如果你想直接删掉空标签，把上面的css换成remove()就行：
    // $('p:empty').remove();
    // $('p').filter(function() { return $.trim($(this).text()) === ''; }).remove();
});

这段代码会在页面加载完成后，自动找到所有空的<p>标签，要么把它们的高度和内外边距设为0，要么直接删除，按需选择就行。

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