Skip to main content
2 de 3
adicionou 73 caracteres ao conteúdo
Largato
  • 92,9mil
  • 18
  • 190
  • 261

Seu CSS está funcionando perfeitamente bem, só faltou entender como funciona o <p>. Por padrão, a largura de um parágrafo é 100%, mesmo que o texto não pegue toda a largura.

Para obter o efeito desejado, basta mudar essa característica com um float:left, ou mesmo um display:inline-block. Segue exemplo funcional:

.reduzido { float:left; background-color: #fc9 }

.texto { clear:both }
<p class="reduzido">CONSULTÓRIO</p>

<p class="texto">Texto texto texto texto texto texto texto.</p>

Desta forma você não tem que desestruturar seu HTML original para obter o efeito desejado, e o elemento continua com as características de bloco. Note que é conveniente usar clear:both ou ao menos clear:left no elemento seguinte, para garantir que ele comece na linha de baixo, pelo fato de ter deixado espaço para outras coisas depois do parágrafo.

Largato
  • 92,9mil
  • 18
  • 190
  • 261