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 >
            <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

CodePudding user response：

You need to add padding-inline (padding-inline is padding-left padding-right)

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

<div >
            <p> <code>&lt;p&gt;This is a paragraph &lt;/p&gt;</code></p>
        </div>

CodePudding user response：

You can add padding-left and padding-right properties to the codeText class dan add width to the class codeText, like my code

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

<div >
            <p> <code>&lt;p&gt;This is a paragraph &lt;/p&gt;</code></p>
</div>

CodePudding user response：

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 >
      <p> <code>&lt;p&gt;This is a paragraph &lt;/p&gt;</code></p>
  </div>