Se você não sabe qual é a diferença entre preenchimento e margens, você não está sozinho. É uma pergunta freqüente e atrapalhou muitos web designers. Com este tutorial rápido, aprenda a distinguir entre os dois.
Entendendo a Diferença
Margens e preenchimento podem ser confusos para o web designer novato e, às vezes, até para designers com mais experiência. Afinal, de certa forma, eles parecem a mesma coisa: espaço em branco ao redor de uma imagem ou objeto.
O preenchimento é simplesmente o espaço dentro da borda entre a borda e a imagem real ou o conteúdo da célula. Na imagem, o preenchimento é a área amarela em torno do conteúdo. Note que o preenchimento vai completamente ao redor do conteúdo. Você encontrará acolchoamento nos lados superior, inferior, direito e esquerdo.
Por outro lado, as margens são os espaços fora da borda, entre a borda e os outros elementos próximos a este objeto. Na imagem, a margem é a área de wite fora do objeto inteiro. Note que, como o preenchimento, a margem passa completamente pelo conteúdo. Existem margens nos lados superior, inferior, direito e esquerdo.
Dicas úteis
Tenha em mente que, se você estiver planejando fazer coisas realmente sofisticadas com margens e preenchimento, alguns navegadores, como o Internet Explorer, não implementam o modelo de caixa corretamente. Isso significa que suas páginas serão diferentes (e às vezes muito diferentes) em outros navegadores.
