Solution via CSS
The solution depends on the remainder of your markup , but if you have a <p/>
within a <div/>
, without adding more markup you can assign the property display
to your paragraph:
p{
background-color:orange;
display:inline-block; /* deixa de ser bloco e passa a bloco de linha */
}
In this way markup stays the same and you make use of CSS properties to adjust the display of the element.
In detail
By default the <p/>
element is displayed as a block, which causes it to occupy the full width of the screen.
When we apply the display
property to the value inline-block
in the CSS, we mean that we want <p/>
to be displayed as a line block whose characteristic is that its width is not greater than width of your content unless otherwise specified.
Example
p{
background-color:orange;
display:inline-block;
}
<div>
<p>CONSULTÓRIO</p>
</div>