Solução via CSS
A solução depende do restante da tua markup, mas se tens um <p/>
dentro de uma <div/>
, sem adicionar mais markup podes atribuir a propriedade display
ao teu paragrafo:
p{
background-color:orange;
display:inline-block; /* deixa de ser bloco e passa a bloco de linha */
}
Desta forma a markup mantém-se igual e fazes uso das propriedades de CSS para ajustar a apresentação do elemento.
Em detalhe
Por defeito o elemento <p/>
é apresentado como um bloco, o que faz com que o mesmo ocupe toda a largura da tela.
Ao aplicar no CSS a propriedade display
com o valor inline-block
estamos a indicar que pretendemos que o <p/>
seja apresentado como um bloco de linha, cuja característica do mesmo é que a sua largura não é superior à largura do seu conteúdo salvo se especificado.
Exemplo
p{
background-color:orange;
display:inline-block;
}
<div>
<p>CONSULTÓRIO</p>
</div>
<h1>
,<h2>
, etc., já que se trata de um título - aparentemente.<p>
serve para envolver parágrafos propriamente ditos.