如何在保留<p>标签分行编写时消除标签间的空白间隔？

我需要让“Serves:”和“4”对应的背景元素完全贴在一起，现在发现把两个<p>标签紧贴着写在同一行能解决，但这样代码可读性太差。有没有办法在保持两个<p>标签各自独立成行的前提下，消除它们之间的空白间隔？

原示例代码：

CSS #

.serves-container {
    display: block;
    text-align: center;
    align-content: center;
}

.serves-label,
.serves-number {
    padding: 10px;
    border-radius: 10px;
    font-weight: bold;
    display: inline-block;
    margin: 0;
}

.serves-label {
    background-color: #1e2827;
    color: #92ab8b;
    border-radius: 0;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-right: 0;
    margin-block-end: 0;
    margin-block-start: 0;
}

.serves-number {
    background-color: #ffed58;
    color: #1d1f2c;
    border-radius: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-left: 0;
    margin-block-start: 0;
    margin-block-end: 0;
}

HTML #

<div class="serves-container">
  <p class="serves-label">Serves:</p>
  <p class="serves-number">4</p>
</div>

解决办法： #

1. 容器设置font-size: 0，子元素恢复字体大小

这是常用方法之一，inline-block元素间的空白本质是文本节点的空格，把容器字体设为0就能消除空格，再给子元素重新设置字体大小：

.serves-container {
    display: block;
    text-align: center;
    align-content: center;
    font-size: 0; /* 新增 */
}

.serves-label,
.serves-number {
    padding: 10px;
    border-radius: 10px;
    font-weight: bold;
    display: inline-block;
    margin: 0;
    font-size: 16px; /* 恢复字体大小，按需调整 */
}

/* 其他样式不变 */

2. HTML中用注释消除换行空白

不用改CSS，直接在两个<p>标签间加注释吃掉换行空白，代码仍能保持换行结构：

<div class="serves-container">
  <p class="serves-label">Serves:</p><!--
  --><p class="serves-number">4</p>
</div>

3. 使用Flexbox布局（最推荐的现代方案）

把容器改成flex布局，flex元素默认不会有inline-block的空白问题，布局也更灵活：

.serves-container {
    display: flex; /* 替换原display: block */
    justify-content: center; /* 水平居中，替代text-align */
    align-items: center; /* 垂直居中，按需调整 */
}

.serves-label,
.serves-number {
    padding: 10px;
    border-radius: 10px;
    font-weight: bold;
    margin: 0;
    /* 可删掉display: inline-block */
}

/* 其他样式不变 */

4. 子元素设置负margin（不推荐）

给第一个元素加负的右margin（比如margin-right: -4px）来抵消空白，但这个数值依赖字体和浏览器，稳定性差，一般不建议用。

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