0

Tenho um input e gostaria de colocar um box-sizing pois vou usar padding-left e não gostaria de mexer na largura do elemento.

Meu HTML:

<div class="contato">
  <form>
    <input type="text" />
  </form>
</div>

Meu CSS:

.contato input {
    width: 480px;
    height: 50px;
    background-color: #e9e9e9;
    padding-left: 15px;
    box-sizing: padding-box;
}

O box-sizing não está funcionando, conforme imagem:

inserir a descrição da imagem aqui

5
  • Não é o box-sizing: border-box; que quer usar? o padding-box ainda não é suportado por quase nenhum browser...
    – Sergio
    Commented 2/12/2014 às 19:28
  • Não sabia. É o padding-box mesmo, pois gostaria que os 15px do padding não fossem somados ao width do elemento. Commented 2/12/2014 às 19:32
  • 2
    Nesse caso é o mesmo que o border-box. Dê uma olhada aqui acho que o comportamento/descrição com o padding é igual.
    – Sergio
    Commented 2/12/2014 às 19:36
  • Se juntar uma imagem com o problema seria bom, no caso de eu não estar a perceber bem o problema...
    – Sergio
    Commented 2/12/2014 às 19:36
  • 1
    Ahh, você já esclareceu minha dúvida, eu não sabia que o border-box serviria para a minha necessidade. Muito obrigado. Commented 2/12/2014 às 19:40

1 Resposta 1

2

O padding-box ainda não é suportado por quase nenhum browser.

Acho que pode usar box-sizing: border-box;, para o que explica acho que é essa a solução. A descrição da MDN diz:

border-box
A largura e altura includem o padding e o border mas não a margin
The width and height properties include the padding and border, but not the margin.

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 .