How to apply background colour property to only the area on which the text is located?

Question

I have a div block inside which I have a paragraph whose background is black:

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                background-color: black;
                color: white;
                text-align: center;
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        <div>
            <p>Paragraph</p>
        </div>
    </body>
</html>

The output of the above code is this:

I want the background colour to be only applied to the area on which the text of the paragraph is located, like this:

I have no idea how to achieve that effect. Can anyone tell me what to do? (P.S. Can you also tell me how to round the corners?)

Wrap the text in an inline element such as `span` and apply the background to that. — Johannes H., Aug 14 '21 at 07:14

UModeL · Accepted Answer · 2021-08-14T07:33:31.767

Make <p> an inline-block element and give it a background color:

div {
  color: white;
  text-align: center;
  font-size: 50px;
}

p {
  background-color: black;
  display: inline-block;
}

<div>
  <p>Paragraph</p>
</div>

If <div> is just a wrapper, then you can do it even easier:

div {
  width: min-content;
  margin: 0 auto;
  background-color: black;
  color: white;
  font-size: 50px;
}

<div>
  <p>Paragraph</p>
</div>

score 1 · Answer 2 · answered Aug 14 '21 at 07:13

Do something like this set the parent element width to width: max-content.

div {
  background-color: black;
  color: white;
  text-align: center;
  font-size: 50px;
  position: relative;
  width: max-content;
}

<div>
  <p>Paragraph</p>
</div>

And for rounding the corners set border-radius: 2px or change the value to how round you want.

div {
  background-color: black;
  color: white;
  text-align: center;
  font-size: 50px;
  position: relative;
  width: max-content;
  border-radius: 4px;
}

<div>
  <p>Paragraph</p>
</div>

score 0 · Answer 3 · answered Aug 14 '21 at 07:15

0

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                background-color: black;
                color: white;
                text-align: center;
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        <div>
            <p><span style="background-color:blue;border-radius: 4px" >Paragraph</span></p>
        </div>
    </body>
</html>

answered Aug 14 '21 at 07:15

Titus Cheserem

89
1
7

I think you misunderstood the question. I only wanted to apply the background colour to the text (as you have applied the blue colour). But the black colour around the paragraph covering the empty space is unnecessary and I wanted to do away with that. – pr0grammar Aug 14 '21 at 08:05

score 0 · Answer 4 · answered Aug 14 '21 at 07:29

You don't need to write extra css for p tag. You can also achieve this behavior by using div css only.

div {
  background-color: black;
  color: white;
  font-size: 50px;
  position: relative;
  width: max-content;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

<div>
  <p>Paragraph</p>
</div>

How to apply background colour property to only the area on which the text is located?

4 Answers4