Aprendendo CSS e HTML Vanessa S.
Diferenças entre Margin e Padding
Dando segmento à série de artigos Aprenda CSS e HTML, hoje veremos sobre a diferença entre Margin e Padding, que são propriedades que nos permite adicionar espaço em branco entre os elementos HTML, evitando que os elementos fiquem “grudados”.
Embora ambas possuirem funções semelhantes, cada uma possui sua particularidade.
Padding: determina as margens internas, é responsável por determinar a distância entre o conteúdo de determinado elemento e sua borda.
Margin: determina a distância de um elemento para outro.
Para melhor entendimento, veja imagem:
Assim como você tem a possibilidade de definir bordas para cada lado de seus elementos HTML(por exemplo:bordas na sidebar), você pode fazer o mesmo com as propriedades margin e padding. Tudo o que você precisará fazer é alterar os valores top, right, bottom e left.
Esses valores podem ser: auto, cm, mm, em, pt, pc, px, em, ex.
Utilizando margin e padding, você deve informar cada valor estabelecido nos quatro cantos, sendo eles: topo, direita, abaixo, esquerda. Cada valor declarado deve se referir a cada lado do elemento HTML.
O primeiro valor é para o topo , e eles seguem um sentido horário, portanto, o próximo valor seria para a direita, depois para baixo e por último à esquerda.
Ex.1: padding: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).
margin: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).
Se você definir um valor único, a distância aplica-se a todos os lados, ela será aplicada aos 4 lados do elemento HTML.
Ex.2:
margin: 5px;
padding: 8px;
Padding: é o número de pontos em que o conteúdo está recuado dentro do objeto externo.
Margin: determina a distância de um elemento para outro.Podemos utilizar a propriedade margin para arrumar a distância entre o post e os limites da coluna da postagem, por exemplo.
Ou seja, ao estipular uma margin estamos definindo um espaço entre uma camada e as camadas texto, imagens ou outros conteúdos que tiver aos lados.
Ao estipular um padding em uma camada, por exemplo, estamos definindo o espaço que há entre a borda da camada e o que estiver dentro.
não deu pra comentar no post dos elementos da página, mas foi O MELHOR QUE EU JÁ LI!!!
Seus tutos são muito bem explicados!
Poxa Clau, você não tem idéia de como está me ajudando a enveredar pelos ramos do web design..abçs e que Deus te abençoe 🙂
Estou querendo colocar a imagem do titulo grudada de ponta a ponta na postagem, sem espaço como eu faço????
Muito bom esse post! Me ajudou bem na personalização do título das minhas Gadgets no meu Blog de testes ^^. A cada dia, aprendo muito mais sobre personalização de Layouts de blogs. Você é muito habilidosa ensinando Clau! Espero ver o Mundo Blogger sempre no ar ^^.
Olá, Clau, Boa noite!
Estou com problemas na página do meu blog já pesquisei em vários locais e não consegui achar uma explicação que resolva o meu problema. Não domino quase nada de códigos HTML e com uma certa dificuldade, sempre testando muitas vezes montei um blog sobre makes e afins que ainda estou configurando, acrescentando e modificando elementos. O problema é que a página do blog está ultrapassando os limites do rodapé, quando na verdade deveria parar nele, mas ultrapassa e muito esse limite. Já tentei trocar por outros modelos, mexer no código do rodapé, mas nada surti efeito, não sei mais o que fazer. Eu uso o navegador IE. Se puder dar uma olhada e me sugerir a solução ficarei imensamente grata. O blog é esse: http://www.makeantenadas.com/
Se achar necessário também posso enviar a cópia do modelo, pois acredito que o erro seja em algum código.
Ah, a propósito achei o seu blog maravilhoso, super informativo e personalíssimo, adorei!
Desde já agradeço a gentileza, atenciosamente, Afrodite.
Aumente o Outer-Wrapper, mas para isso provavelmente tera que arumar o reorganizar o template
toda vez que eu adiciono padding na sidebar ou no main-wrapper eles aumentam o tamanho fazendo que saiam do lugar ficando a sidebar por baixo da área de postagem, o que eu faço?