2

Então pessoal, gostaria de ajuda aqui com css.

Por exemplo:

Tenho um h3

<h3> Bem Vindo ao Portal do Cliente </h3>

Quando vou ver no navegador, tenho o texto e a caixa do h3.

inserir a descrição da imagem aqui

O que eu queria é fazer com que a caixa do h3 ficasse do tamanho do texto. Isto é, que o width se limitasse ao final do texto automaticamente sem ter que informar um tamanho em pixels.

Retirar aquela espaço em branco após o texto.

Tem como fazer isso?

Pode notar que coloquei width com tamanho pequeno mas a caixa do h3 continua grande embora o texto tenho encolhido. Note que após o texto existe uma parte colorida até o fim da linha.

inserir a descrição da imagem aqui

2
  • Tente colocar no h3 um display: inline; 24/07/2017 às 13:51
  • Como esta fazendo no momento?
    – David
    24/07/2017 às 13:53

3 Respostas 3

2

Tente assim:

header{
   border: 1px solid black;
   border-radius: 10px;
   float: left;
}
h3{
   display: inline;
}
<header>
    <h3>Bem Vindo ao Portal do Cliente</h3>
  </header>

Ou assim:

header{
   border: 1px solid black;
   border-radius: 10px;
   float: left;
}
<header>
    <h3>Bem Vindo ao Portal do Cliente</h3>
  </header>

1

h3 {
  float: left;
}
<h3> Bem Vindo ao Portal do Cliente </h3>

inserir a descrição da imagem aqui

1

Vi que já deram a resposta correta. Mas faltou uma explicação para o ocorrido.

O h3 tem por padrão um display: block; para que ele sirva de cabeçalho ocupando todo o espaço do linha para que o seu texto comece embaixo dele. Então mesmo que você diminua a sua largura, ele ainda vai ocupar todo o espaço com margem (laranja).

Então duas duas opções, se fizer questão que seja um h3, embora eu não veja porque seria necessário, seria ou fazer como te indicaram com um float: left;, porque dessa forma você faria ela flutuar à esquerda e liberaria a sua margem, ou mudar o display para inline, pois assim ele seria tratado como um texto qualquer e não tomaria todo o espaço.

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 .