How do I make a gap between this text and the text background?

Question

right now my div looks like this:

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

when I use it on a <p> like this:

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

The output looks like this:

Code output screenshot

What I want is for there to be a little gap between the text and the background. (gaps on the red arrows shown on the screenshot)

edit: I want to implement this into the .codeText{} and not inline so I can use in multiple areas

Answer 1

You could add some padding and width to the 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>