[ANSWERED] html – How do I make a gap between this text and the text background?

Question 1

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

Question 2

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

Question 3

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>

Question 4

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

Bollate

[ANSWERED] html – How do I make a gap between this text and the text background?

By

Solution 1 :

Solution 2 :

Solution 3 :

Problem :

Comments

Comment posted by edit

By

Related Post

[ANSWERED] html – Trying to align a div to the right using CSS

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] html – select all elements within a parent class

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate