如何移除div内部文本与其边框之间的多余空白间隙

间隙产生原因 #

• 浏览器默认样式会给<p>标签添加上下外边距，你当前的样式代码只设置了<p>的左右边距margin-inline: 10px，没有清除默认的上下边距，这是间隙的主要来源。
• 若清除上下边距后仍有极少量留白，是字体渲染自带的字形上下预留空间，可通过调整行高进一步收紧。

修正后的代码 #

CSS 代码 #

div {
  display: inline-flex;
  line-height: 1;
  border: 2px solid rgb(204, 33, 33);
  /* 可选：保证内部元素垂直居中对齐 */
  align-items: center;
}

p {
  margin-inline: 10px;
  /* 新增：清除<p>标签默认上下外边距 */
  margin-block: 0;
  font-size: 30px;
  /* 可选：进一步收紧文本上下的预留留白 */
  line-height: 1;
  border: 2px solid rgb(204, 33, 33);
}

HTML 代码 #

原有HTML结构无需调整，保持如下即可：

<div>
  <p>text</p>
  <p>text</p>
</div>

修改后即可完全消除div与内部文本之间的空白间隙。

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