Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1513083632
Vida do cache: 1513126832
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Aprendendo CSS e HTML

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.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

6 Comentários

  1. Di web disse:

    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 :)

  2. Ivan disse:

    Estou querendo colocar a imagem do titulo grudada de ponta a ponta na postagem, sem espaço como eu faço????

  3. Kevvin Oliveira disse:

    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 ^^.

  4. ?Afrodite? disse:

    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.

  5. .::GEEH::. disse:

    Aumente o Outer-Wrapper, mas para isso provavelmente tera que arumar o reorganizar o template

  6. karatuca disse:

    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?

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.