As propriedades CSS margin e padding fornecem aos desenvolvedores a capacidade de controlar o espaço dentro e fora dos elementos em uma página da web, dando-lhe a aparência desejada.
Tão importante quanto essas propriedades são, muitas vezes, mal compreendidas pela maioria dos desenvolvedores, especialmente os novatos. Este tutorial desmistifica as questões em torno de margens CSS vs. preenchimento.
Abordaremos o modelo de caixa CSS, o significado das propriedades de margem e preenchimento, como e quando usá-los e as diferenças entre eles.
O modelo de caixa CSS
Para entender efetivamente a margem vs. preenchimento CSS, é fundamental entender o modelo de caixa CSS e como os elementos HTML são renderizados seguindo seu padrão.
Cada elemento HTML adicionado a uma página da web é renderizado como uma caixa no navegador Por exemplo, a imagem abaixo não parece conter caixas, mas sim um círculo e um texto.
No entanto, se um navegador inspecionar esses elementos, como pode ser visto na imagem abaixo, a renderização do navegador engine representa os elementos como uma caixa de acordo com o modelo de caixa CSS.
Então, o que exatamente é o modelo de caixa CSS? É essencialmente uma caixa que envolve cada elemento HTML de nível de bloco em um site.
Cada caixa é composta de quatro áreas definidas por suas respectivas bordas: a borda do conteúdo, borda de preenchimento, borda da borda e margem borda.
Usando a ilustração acima como exemplo, vamos detalhar as quatro áreas de cada caixa.
Área de conteúdo
A área de conteúdo, definida pela borda do conteúdo, representa o valor do elemento HTML especificado.
Por exemplo, se adicionar um elemento
