Como evito que a propriedade padding altere a largura ou a altura no CSS?


227

Estou criando um site com DIVs. Tudo está dando certo, exceto quando eu crio um DIV. Eu os crio assim (exemplo):

newdiv {
    width: 200px;
    height: 60px;
    padding-left: 20px;
    text-align: left;
}

Quando adiciono a padding-leftpropriedade, a largura das DIValterações é de 220px e quero que ela permaneça em 200px.

Digamos que eu crie outro DIVnome anotherdivexatamente igual a newdive o coloque dentro, newdivmas newdivnão tem preenchimento e anotherdivpossui padding-left: 20px. Eu recebo a mesma coisa, newdiva largura será de 220px.

Como posso resolver este problema?


3
Estou triste dizer, mas eu gosto de como o IE lida com isso ... Faz muito mais sentido para mim ...
Nicu Surdu

Respostas:


390

Adicionar propriedade:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

Nota: Isso não funcionará no Internet Explorer abaixo da versão 8.


14
Essa é uma ótima solução para bordas, mas como isso ajuda no preenchimento?
305 Kato

6
Isso é pura magia! - Ele corrige o modelo de caixa que todos conhecemos e odiamos! ou seja, faz funcionar da maneira que a intuição sugere que deveria - em vez das especificações -, mas até onde eu sei não quebra nenhuma especificação: D Este artigo esclarece bem ... stackoverflow.com/questions/779434/…
technicalbloke

2
@technicalbloke Seu link volta a esta pergunta.
mhenry1384

11
Ops sim, copie e cole o pau para cima. Este é o link que eu pretendia share ... paulirish.com/2012/box-sizing-border-box-ftw
technicalbloke

1
Muitos de vocês devem considerar a largura: truque automático abaixo. Funciona em navegadores, menos código, etc.
Ryan Shillington



11

Se você deseja recuar o texto dentro de uma div sem alterar o tamanho da div, use o CSS em text-indentvez de padding-left.

.indent {
  text-indent: 1em;
}
.border {
  border-style: solid;
}
<div class="border">
  Non indented
</div>

<br>

<div class="border indent">
  Indented
</div>


1
Esta é a única solução que eu achei que funcionou para minha div de largura fixa. infelizmente, o tamanho da caixa não impediu que o estofamento impactasse a largura, por isso agradecemos uma tonelada por apontar essa incrível propriedade.
Stevo

8

basta adicionar box-sizing: border-box;


12
Isso é exatamente o mesmo que o que outras respostas já dizem aqui.
precisa

1

quando adiciono a propriedade padding-left, a largura do DIV muda para 220px

Sim, isso é exatamente de acordo com os padrões. É assim que deve funcionar.

Digamos que eu crie outro DIV chamado anotherdiv exatamente o mesmo que newdiv e coloque-o dentro de newdiv, mas newdiv não tem preenchimento e outrodiv tem preenchimento à esquerda: 20px. Eu recebo a mesma coisa, a largura do newdiv será 220px;

Não, o newdiv permanecerá com 200 pixels de largura.


2
Guffa, não é assim que os padrões devem funcionar. Definitivamente, o preenchimento não deve afetar as dimensões do elemento ao qual está sendo aplicado. Com o maior respeito, é possível que você esteja confundindo 'preenchimento' com 'margem'?
da5id 22/04/09

1
Sim, o preenchimento definitivamente deve afetar as dimensões do elemento. Eu acho que é você quem está confuso ... como você propõe que a margem afetaria as dimensões do elemento?
Guffa 22/04/09

Na verdade, você sabe que acho que nós dois estamos certos de certa forma. Estou tão acostumado a lidar com os efeitos que esqueci completamente o padrão. Eu encontrei uma boa explicação aqui quirksmode.org/css/box.html
da5id

Então, minhas desculpas, Sr. Guffa. Mas, para fins práticos (que é afinal o que estamos falando), meu conselho ainda é bom, não?
da5id 22/04/09

Bem, você está certo medida em que há um bug modelo de caixa, mas não se aplica a esta pergunta ... :)
Guffa

-1

apenas altere a largura da sua div para 160px, se você tiver um preenchimento de 20px, ela adiciona 40px a mais à largura da sua div, para subtrair 40px da largura, a fim de manter sua div parecer normal e não distorcer a largura da div. seu texto todo bagunçado.


2
É o mesmo que a resposta dada por @rvarcher.
precisa saber é o seguinte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.