Box Model (Modelo de Caixas) em CSS - Margin, Padder e Border

Neste tutorial de nosso Curso de CSS, vamos falar de um dos conceitos mais importantes sobre o CSS, o de Box Model (ou Modelo das Caixas).

Com a ideia apresentada neste artigo, entenderemos mais sobre layouts mais bonitos e profissionais, com colunas, espaçamentos, margens e outras ideias que fazem parte do Box Model em CSS.

• Fazer download da Apostila de HTML + CSS

Box Model em CSS - O Modelo de Caixas

Neste tutorial, não iremos estudar especificamente alguma propriedade do CSS ou nova tag, muito menos mostrar códigos e exemplos.

Vamos estudar algumas ideias e conceitos que nos farão entender melhor como funcionar o CSS, como ele age no HTML, e como ambos "vêem" cada elemento que inserimos no código HTML & CSS.

Box em inglês significa caixa, e é, basicamente, isso que cada elemento de um site é, é tudo uma espécie de caixa, no sentido de ser um retângulo, um bloco é a melhor definição.

Olhe nosso site, nossa Apostila HTML Progressivo.

Ele é todo composto por caixas, por retângulos ou blocos.

Veja, tem um bloco lá em cima, com o nome do site e uma frase logo abaixo.

Abaixo, colado, tem um bloco com os links de navegação, com as sessões e tutoriais.

Na esquerda tem um bloco com anúncio do AdSense, outros cursos, dicas de livros etc.

Na direita, há um bloco com os tutoriais mais visitados, e acima deste bloco há um pequeno bloco do G+, do Google Plus.

Dentro do nosso artigo, que é uma caixa, box ou bloco, há diversos blocos menores.

O título (uma tag <h1>) é um bloco retangular.

Cada parágrafo é uma caixa também, ela tem seu espaço para ocupar.

Uma figura com sua legenda também é um box, encaixado no restante do conteúdo.

O importante de se entender aqui é: as tags, elementos e tudo mais no HTML, quando são renderizados pelo navegador, o que vai ser visto são blocos, são boxes que vão se encaixando em cima, do lado, abaixo do outro, formando o layout de um site. Viu isso?

Elementos do Box Model - De que é feito o Modelo de Caixas

Ok, já sabemos e visualizamos o box model, e sabemos que o layout é a disposição e organização desses blocos, dessas caixas.

Agora vamos entrar em detalhe sobre cada um desses elementos, de cada caixa/box, e saber do que elas são compostas e como funcionam.

Cada caixa é composta por 4 elementos:

• conteúdo (content) do elemento, que pode ser um texto do parágrafo, imagem etc
• padding (acolchoamento ou enchimento, em inglês), fica imediatamente ao redor do conteúdo
• border (bordas) são linhas que delimitam o elemento, podendo aparecer em um ou mais direção (cima, baixo e nas laterais)
• margin (margens) é o espaçamento entre os elementos, ou seja, entre as caixas ou tags (boxes)

Veja a seguinte imagem para entender melhor o box model:

Fonte da Imagem: w3schools.com

Padding, Border e Margin: top, bottom, left e right

Ao longo dos próximos tutoriais de CSS, iremos estudar bastante sobre estas 3 propriedades padding, border e margin, pois eles não são importantes, seu uso é simplesmente  obrigatório e essencial na criação de qualquer de um layout profissional para qualquer site que você venha a fazer.

O flexível CSS no permite usar somente um, outro ou todos desses elementos.

E podemos formatar a região superior (top), inferior (bottom), esquerda (left) e direita (right) de cada um deles.

Veja na figura como é a ordem das caixas, que envolvem qualquer elemento de conteúdo:

Embora o CSS nos permita alterar somente uma ou outra caixa e seus valores, os que não forem claramente definidos nas folhas de estilo, serão renderizados de acordo com as propriedades padrão de cada navegador do usuário.

Ou seja, é uma prática importante e profissional definir e formatar o padding, border e margin, e os lados que compõe essas boxes em CSS (top, bottom, left e right).