如何在文本和文本背景之间留出间隙

Question

现在我的div看起来是这样的：

.codeText{
background-color: #2C3E50 ;
color: white;
display:inline-block;
border-radius: 25px;
}

当我在像这样的<p>上使用它时：

<div class="codeText">
<p> <code>&lt;p&gt;This is a paragraph &lt;/p&gt;</code></p>
</div>

输出如下：

代码输出屏幕截图

我想要的是文本和背景之间有一点间隙。(屏幕截图上红色箭头上的间隙(

编辑：我想将其实现到.codeText{}中，而不是内联，这样我就可以在多个区域中使用

Answer 1

您需要添加padding-inline(内联填充为padding-left+padding-right(

.codeText{
background-color: #2C3E50 ;
color: white;
display:inline-block;
border-radius: 25px;
padding-inline: 5px;
}

<div class="codeText">
<p> <code>&lt;p&gt;This is a paragraph &lt;/p&gt;</code></p>
</div>

Answer 2

您可以向codeText类添加padding-left和padding-right属性，并向类codeText添加宽度，就像我的代码一样

.codeText{
background-color: #2C3E50 ;
color: white;
display:inline-block;
border-radius: 25px;
padding-left : 10px;
padding-right : 10px;
width : 220px;
text-align : center;
}

<div class="codeText">
<p> <code>&lt;p&gt;This is a paragraph &lt;/p&gt;</code></p>
</div>

Answer 3

您可以在codeText 中添加一些填充和宽度

.codeText {
background-color: #2C3E50;
color: white;
display:inline-block;
border-radius: 25px;
padding-inline: 10px;
}

<div class="codeText">
<p> <code>&lt;p&gt;This is a paragraph &lt;/p&gt;</code></p>
</div>