O modelo Box CSS
Pietro Gaião | maio 18th, 2010 | Tableless | No Comments »
Todos os elementos HTML podem ser considerados como caixas. Em CSS, esse modelo é usado quando se fala de design e layout.
O modelo de caixa de CSS é essencialmente uma caixa que envolve elementos HTML, e é constituída por: margens, bordas, padding e conteúdo real.
O modelo de caixa nos permite colocar uma borda em torno de elementos e elementos do espaço em relação a outros elementos.
A imagem abaixo ilustra o modelo de caixa:
Explicação das diferentes partes:
- Margin – Limpa uma área em torno da fronteira. A margem não cor de fundo, e é completamente transparente
- Border – A fronteira que se situa em torno do preenchimento e conteúdo. O fronteira é afetado pela cor de fundo da caixa
- Padding – Limpa uma área em torno do conteúdo. O padding é afetado pela cor de fundo da caixa
- Content – O conteúdo da caixa, onde o texto e as imagens aparecem
A fim de definir a largura ea altura de um elemento corretamente em todos os browsers, você precisa saber como funciona o modelo de caixa.
Largura e altura de um elemento
Importante: Quando você especificar as propriedades width e altura de um elemento com CSS, você são apenas definir a largura e altura da área de conteúdo. Para saber o tamanho total do elemento, você também deve adicionar o padding, borda e margem.
A largura total do elemento no exemplo a seguir é 300px:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
Vamos fazer as contas:
250px (largura)
+ 20px (esquerda e direita padding)
+ 10px (esquerda e direita border)
+ 20px (margem esquerda e direita)
= 300px
Imagine que você só tinha 250px de espaço. Vamos fazer um elemento com um total largura de 250px:
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
Problema de Compatibilidade de navegadores
Se você testou o exemplo anterior do Internet Explorer, você viu que a largura total não era exatamente 250px.
IE inclui padding e borda na largura, quando a propriedade largura é conjunto, a menos que um DOCTYPE é declarada.
Para corrigir esse problema, basta adicionar um DOCTYPE para o código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
Popularity: 13% [?]
Gustavo Girard