Margens e preenchimento podem ser confusos porque, de certa forma, parecem a mesma coisa: espaço em branco ao redor de uma imagem ou objeto. Aqui está o que você como web designer precisa saber sobre suas diferenças.
Preenchimento
Preenchimento é o espaço entre o conteúdo de uma imagem ou célula e sua borda externa. Na imagem abaixo, o preenchimento é a área amarela ao redor do conteúdo. Nesse caso, o preenchimento contorna completamente o conteúdo: lados superior, inferior, direito e esquerdo. Você pode especificar quanto preenchimento (em porcentagem, pixels, pontos, etc.) para cada lado, e eles não precisam ser iguais. Desta forma, você pode posicionar o conteúdo dentro de um elemento.
Margens
Em contraste, as margens são os espaços fora da borda de um elemento, entre o elemento e o que for adjacente a ele. Na imagem, a margem é a área branca fora de todo o objeto. Assim como o preenchimento, a margem contorna completamente o conteúdo neste exemplo: nos lados superior, inferior, direito e esquerdo. Você pode usar margens para posicionar divs e outros elementos em uma página.
Sempre teste suas páginas em vários navegadores, sistemas operacionais (incluindo dispositivos móveis) e tamanhos de tela para garantir que elas sejam exibidas exatamente como você deseja.
