intro

Box model <>

Todos os elementos HTML podem ser considerados como caixas

Em HTML, todos os elementos podem ser considerados como CAIXAS. Isto é chamado de box model. O box model consiste de: margens, bordas, paddings e o próprio conteúdo.

  • margin: área transparente fora da borda do elemento
  • border: a borda que circunda o elemento
  • padding: área transparente entre o conteúdo e a borda
  • conteúdo: área onde textos ou imagens são mostradas
A generic square placeholder image with rounded corners in a figure.
Isto aqui é só uma imagem, mas representa o espaço ocupado pelos elementos

Um exemplo de elemento para ser investigado usando a ferramenta de desenvolvedor:


  p {
    margin: 40px;
    padding: 20px;
    border: solid 4px;
    background-color: #eeeeee;
  }

Até mesmo este parágrafo é um retângulo.