Conceito Modelo de Caixa (Box Model) – A diferença entre os atributos Margin, Padding e Border- CSS

Venho recebendo muitos emails de leitores me pedindo para ensinar como se põe o menu de páginas no topo do blog com a caixa de busca. Eu vou ensiná-los como se faz mais para frente. Vocês verão em breve este tutorial. Porém, preciso prepará-los para este tutorial. Ou seja, hoje vocês aprenderão a diferença entre Margin e Padding, pois estes dados serão fundamentais para o tutorial do menu de páginas, mais para frente.

Conceito Modelo de Caixa (Box Model)

O modelo de caxa é um conceito muito importante para que você compreenda o que sigifica Margin e Padding. Todo elemento HTML possui propriedades de espaçamento: margin (margem), border (borda) e padding (preenchimento) e o centro em cinza de tom mais claro constitui a content (conteúdo).

O modelo nos permite colocar uma borda em torno dos elementos e estes elementos interligam uns com os outros.

Conceito de Caixa Box

A diferença entre os atributos Margin e Padding

Margin e Paddign são atributos usados em css para definir espaços em branco, ou margem e espaçamento de um elemento. Este elemento possui quatro lados: right (direito), left (esquerdo), top (superior) e bottom (inferior).

Todos os atributos a seguir, são definidos em pixels.

MARGIN: É uma área em torno da fronteira. Ela não ter cor de fundo, e é usada para exemplificar o espaçamento externo de um elemento, ou seja, a distância a partir da borda do elemento.

PADDING: É a fronteira situada em torno do preenchimento e do conteúdo. É usada para determinar o espaçamento interno de um elemento. Ela não tem cor de fundo, assim como a margin, ela é totalmente invisível.

Propriedades Padding

padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;

Ou podemos abreviar usando valores no sentido horário:

padding: top right bottom left

Resultado:

padding: 0px 0px 0px 0px

E se por acaso as verticais (top e bottom) e as horizontais (right e left) sejam iguais, podemos abreviar:

padding: verticais horizontais;

Resultado:

padding: 0px 0px;

BORDER: É a fronteira que se situa em torno do conteúdo, e é afetado pela cor de fundo da caixa.

CONTENT: O conteúdo da caixa, onde encontram-se os textos, imagens, etc.

Bella Felix

facebooktwitterlinkedin

Cursando Design Gráfico, blogueira, pseudo-escritora, viciada em RPG e animes, desenha e devora livros. Autora dos blogs Pink Skull Design e The Black Element.