-1

Preciso aplicar a propriedade CSS background-color ao elemento HTML p mas o que está acontecendo é que esse background-color pega toda a largura de uma div por exemplo se for o elemento pai e não só colore o elemento p.

O que eu tenho:

imagem atual

O que eu preciso:

imagem necessária

1
  • 1
    Não temos o conhecimento do código, mas me parece que a tag mais correta seria <h1>, <h2>, etc., já que se trata de um título - aparentemente. <p> serve para envolver parágrafos propriamente ditos. 9/11/2014 às 19:48

3 Respostas 3

7

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>

3
  • quando você diz que o elemento é block por "defeito", tu quis dizer "default" ou que esse comportamento é defeituoso?? ;) 9/11/2014 às 16:33
  • 3
    @AndreFigueiredo Em pt_PT, quando dizemos "por defeito" tem o mesmo significado de "default" em inglês. De igual forma, em pt_PT "por defeito" é diferente de "um defeito" ou "defeituoso". A palavra "defeito" isolada ou noutro contexto já pode ter o sentido a que te referes, mas neste caso não por estar precedida de "por" que trás um novo significado à mesma. :)
    – Zuul
    9/11/2014 às 17:50
  • Ah entendi, é que não conhecemos essa expressão no pt_BR. Obrigado pela explicação. :) 9/11/2014 às 19:44
5

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 contido neste não pegue toda a largura.

Para obter o efeito desejado, basta mudar esta 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. Com o espaço para outras coisas depois do parágrafo, outros elementos podem ficar na mesma linha sem o clear.

3

Coloque o texto específico dentro da tag span e deixe o seu CSS da seguinte forma:

<html>
  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      p span{
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div><p><span>PARAGRAFO</span></p></div>
  </body>
</html>

Fiz o teste aqui e funcionou normalmente.

1
  • 3
    Dei +1 porque efetivamente esta solução resolve o problema mas deixo a ressalva de que adicionar markup para lidar com questões visuais é incorreto. O CSS existe para isso mesmo.
    – Zuul
    9/11/2014 às 15:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .