HTML CSS - Box Model

HTML CSS - Box Model

Uma das bases para se entender o funcionamento do CSS é o modelo de caixa, ou box model.

Em qualquer navegador, depois de clicado o botão direito aparece a opção inspeccionar. Depois no separador elementos vai aparecer no fundo o Box Model. Abrir uma página vazia ajuda a encontrar.

Box Model - Google Chrome

Podemos jogar um pouco com o Box Model, para aprender (e complicar) criando um HTML simples:

HTML

Apenas tem linkado o ficheiro CSS e um div com um título H1

CSS

No CSS apenas estão activadas propriedades para o div com a classe página.

A correspondencia tal qual como está entre o CSS e o que é mostrado na página com o Bom Model é a seguinte:

No CSS não tenho a propriedade margin 5 px mas o Box Model indica 8 px.

Na verdade esse margin é relativo ao elemento HTML que não está definido e se apresenta com um valor por defeito.

Como perceber isso?

primeiro colocar uma linha a rodear o elemento div, e depois se clicar dentro do conteúdo do DIV (H1) e inspeccionar vemos que agora o esquema de Box Model já apresenta a margen de 5 px.

DIV ou HTML

Ao clicar na zona "laranja" vemos a margem de 5 px.

O que estava na primeira imagem era um clique na parte lateral do que parecia ser o elemento DIV, clique na zona ciano, que dá essa margem de 8px por defeito.

Por exemplo se colocarmos no CSS que o fundo do elemento HTML seja vermelho e clicarmos na zona ciano, o único saliente de conteúdo é o nosso DIV o que engana um pouco se houvesse mais DIVs seriam todos salientados.

Aqui vemos que a margem é zero. Então de onde vinha o margin 8 px?

Do Body que apenas sobressai se no CSS atribuímos um fundo verde, por exemplo.

Veja-se acima que ao pedir a inspeção clicando no local adequado nos fornece o margin 8pn, e salienta na pagina a margen do body por cima do elemento HTML.

Fica tudo um pouco confuso certamente.

Podemos ainda activar no CSS uma linha de bordo para todos os elementos, fica algo como isto:

Atençãoq ue diferentes navegadores têm diferentes características, no Edge, por exemplo o border do div indica 3 px:

Quando alguma propriedade não está definida por vezes recorrem aos valores por defeito.