CSS a largura inclui o preenchimento?

146

Parece que no IE, a largura inclui o tamanho do preenchimento. enquanto em FF, a largura não. Como posso fazer com que ambos se comportem da mesma maneira?

Obrigado.

css Jake
fonte

Você provavelmente precisa ativar o modo compatível com os padrões. Sem ver algum código, no entanto, não posso lhe dar mais orientações do que isso.

Jeff Hubbard

307

O IE costumava usar o modelo de caixa de " caixa de borda" mais conveniente, mas não padrão . Nesse modelo, a largura de um elemento inclui o preenchimento e as bordas. Por exemplo:
#foo { width: 10em; padding: 2em; border: 1em; }
seria 10emlargo.
Por outro lado, todos os navegadores que respeitam os padrões assumem como padrão o modelo de caixa " caixa de conteúdo" . Nesse modelo, a largura de um elemento não inclui preenchimento ou bordas. Por exemplo:
#foo { width: 10em; padding: 2em; border: 1em; }
será realmente 16emlargo: 10em+ 2empreenchimento para cada lado, + 1emborda para cada borda.

Se você usar uma versão moderna do IE com marcação válida , um bom doctype e cabeçalhos apropriados, ela seguirá o padrão. Caso contrário, você pode forçar os navegadores modernos compatíveis com os padrões a usar a "caixa de borda" através de:

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

A primeira declaração é necessária para o Opera, a segunda é para o Firefox, a terceira é para o Webkit e o Chrome.

Aqui está um teste simples que fiz anos atrás para testar qual declaração de tamanho de caixa o seu navegador suporta: http://phrogz.net/CSS/boxsizing.html

Observe que o Webkit (Safari e Chrome) não suporta o padding-boxmodelo de caixa por meio de qualquer declaração.

Phrogz
fonte

2

+1 por mencionar os modelos de caixa de conteúdo e de borda. Talvez queira elaborar as diferenças.

BoltClock

1

@BoltClock Obrigado pelo impulso de responder com mais rigor. Atualizada.

Phrogz

Boa resposta; Eu estive tentando lembrar (ou encontrar) os nomes das diferentes opções para um par de dias agora ... +1 =)

David diz Reintegrar Monica

Ninguém liga para ópera.

Michael J. Calkins

3

@whitelettersinblankpapers Veja por que o W3Schools é péssimo e, em seguida, uma referência muito melhor que leva você ao padrão W3C . Não siga mais links para o W3Schools. Além disso, adicione "MDN" às consultas do seu mecanismo de pesquisa sobre os padrões da web no futuro.

Phrogz

27

Uma regra simples é tentar evitar o uso da propriedade padding / margin e width para o mesmo elemento. ou seja, use algo semelhante a este

<div class="width-div">
     <div class="padding-div">
     ...........
     ...........
     </div>
 </div>

Shankhan
fonte

Uso esse método regularmente e nunca tenho problemas com vários navegadores.

precisa

20

Eu me deparei com essa pergunta e, embora tenha alguns anos, pensei em adicionar isso caso alguém se depare com esse segmento.

CSS3 agora tem uma propriedade de tamanho de caixa. Se você definir, digamos,

.bigbox {
    box-sizing: border-box; 
    width: 1000px; 
    border: 5px solid #333;
    padding: 10px;
}

sua classe terá 1000 px de largura, em vez de 1030px. Naturalmente, isso é incrivelmente útil para quem usa borda do tamanho de pixels com divs líquidos, porque resolve um problema insolúvel.

Melhor ainda, o tamanho da caixa é suportado por todos os principais navegadores, exceto o IE7 e abaixo. Para incluir todos os itens na dimensão largura ou altura, defina o tamanho da caixa como caixa da borda. Para agregar outros itens à largura e / ou altura, que é o padrão, você pode definir o tamanho da caixa como "caixa de conteúdo".

Não tenho certeza do estado atual da sintaxe do navegador, mas ainda incluo os prefixos -moz e -webkit:

.bigbox{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Mason Barge
fonte

Sim, e Paul Irish tem um artigo bom blog sobre isso aqui: paulirish.com/2012/box-sizing-border-box-ftw

Dave Burton

Como esta resposta tem tantos votos positivos quando é a mesma resposta que a resposta aceita que foi escrita há 3 anos?

dippas 02/09/19

1

Você tem um doctype declarado? Quando comecei a codificar html, eu tinha esse problema e era por não ter um doctype declarado. Meu favorito é:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
...
</html>

tybro0103
fonte

1

para aqueles que ainda teriam o problema, o jQuery forneceu duas propriedades outerWidth ()e innerWitdh ()para saber a largura de um objeto com ou sem bordas ...

Patrick
fonte

CSS a largura inclui o preenchimento?

Respostas: