Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Margin, Border, padding

Referente ao curso HTML5 e CSS3 parte 1: crie uma página da Web, no capítulo Estilizando imagens e atividade CSS para imagens

por Adriel
| 7.7k xp | 6 posts

Olá, tudo bem? Cada tag, <p> , <h1>, <h2> ... possui um tamanho próprio de "margin" ou todas elas compartilham da mesma margem? Seria correto dizer que elas funcionam como um espaçamento superior e inferior para os demais elementos? height e width são relativos a "border" apenas, correto? Se eu colorir o background in line estou pintando a área inteira que esta da "margin" para dentro ou só a área do "border" para dentro? E para finalizar, o "padding" seria apenas uma forma de mexer na posição do meu texto de forma que fique ideal ao que preciso dentro do "border"? Se possível, gostaria de ver alguns códigos com exemplos desses elementos.

Muito obrigado.

5 respostas
por Estudante
| 274.4k xp | 229 posts

Olá Adriel,

Cada tag possui um tamanho próprio de "margin" ou todas elas compartilham da mesma margem?

Sim, cada tag possui uma margin padrão definida em cada navegador.

Seria correto dizer que elas funcionam como um espaçamento superior e inferior para os demais elementos?

Sim, a margin é um espaçamento tanto superior e inferior como lateral também.

height e width são relativos a "border" apenas, correto?

Na verdade não, o width e height são relativos à área do conteúdo.

Se eu colorir o background in line estou pintando a área inteira que esta da "margin" para dentro ou só a área do "border" para dentro?

Você estaria pintando do border pra dentro.

E para finalizar, o "padding" seria apenas uma forma de mexer na posição do meu texto de forma que fique ideal ao que preciso dentro do "border"?

Exato.

Essa imagem ilustra bem as 3 propriedades:

margin border padding

Se quiser testar:

  1. Salve esse código em um arquivo
  2. Abra no navegador
  3. Clique com o botão direito do mouse e vá em Inspecionar
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: gray;
            margin:0;
        }

        .box {
            width:50px;
            height:50px;
            color:#fff;
            font-size:20px;
            background-color: red;
            padding: 10px;
            margin: 10px;
            border: 10px solid green;
            display:inline-block;
        }
    </style>
</head>
<body>

    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

</body>
</html>
solução!
por Beatriz Moura
| 770.5k xp | 1156 posts
Alura Scuba Team Instrutora e Desenvolvedora de Software I

Olá Adriel, tudo bem?

Irei colocar um resumo de todos os pontos que você trouxe abaixo, e para isso irei usar como aliada a ferramenta do desenvolvedor (F12). Vamos lá!

Margem dos elementos

Cada elemento possui suas especificidades, o valor do margin não é padrão para todos os elementos. Veja nas imagens a seguir o valor da margem de cada elemento destacado em laranja.

Margem do <h1>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Margem do <h2>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Margem do <p>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Essas diferenças e muitas outras entre os elementos são comumente retiradas por meio do arquivo reset.css, que será ensinado nas próximas aulas do curso.

Box Model

Esse modelo nos mostra que cada elemento é representado por um box ou uma caixa retangular. Nesse box, conseguimos visualizar os limites da margem externa (margin), borda (border), margem interna (padding) e o conteúdo interno (height e width ) de um elemento. Vamos utilizar o exemplo anterior do elemento <h1> para visualizarmos melhor como o Box Model funciona e para isso.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

height e width

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

A altura e largura de um elemento são relativos ao conteúdo interno do elemento, é possível visualizarmos em azul na imagem acima, no caso da <h1>, esse conteúdo interno é um texto. É a camada mais interna do Box Model.

Uma observação importante, é que é possível notal que a altura e largura de um elemento irá compreender apenas o seu conteúdo interno ou seja a camada mais profunda e para modificarmos esse padrão utilizamos a propriedade box-sizing. Essa propriedade também será abordada mais pra frente no curso e eu indico você dar uma olhadinha nesse tópico que respondi aqui

padding

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

O padding representa a margem interna de uma elemento, ele está compreendido entre o conteúdo interno (texto) e a borda, conseguimos visualizar essa dinâmica em verde na imagem acima. Note que ao colorirmos o background do <h1>, estamos colorindo o a camada mais interna do elemento até o início da borda (height e width e padding).

border

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

A border é a região entre o padding e o margin. Está representada em amarelo no Box Model acima.

margin

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

O margin representa a margem externa de uma elemento, ele está compreendido entre elementos, conseguimos visualizar essa em laranja na imagem acima. Utilizamos o margin para criar um espaçamento entre dois ou mais elementos, veja abaixo:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Espero ter ajudado, caso tenha ficado alguma dúvida, fique a vontade para perguntar. Abraços!

por Adriel
| 7.7k xp | 6 posts

Perfeito! muito obrigado :) Vocês são incríveis

por Adriel
| 7.7k xp | 6 posts

Só mais um dúvida. Brincando com esses elementos fiz um stylesheet da seguinte maneira:

p{
    display: inline-block;
    margin-left: 50px
    margin-right: 60px;
    margin-top: 30px;    
    margin-bottom: 40px;
    padding: 30px
    height: 50px;
    width: 120px;
}

vi que ele não aceita o padding, margin-left e margin-right. Por que isso?

por Beatriz Moura
| 770.5k xp | 1156 posts
Alura Scuba Team Instrutora e Desenvolvedora de Software I

Opa Adriel, obrigada pelo retorno.

É esperado que o <p> aceite esses valores! Entretanto, no CSS para que as propriedades funcionem é necessário que elas terminem com ; obrigatoriamente e se você reparar no código, o margin e o padding estão sem esse caractere, a consequência disso é a não aplicação dessas propriedades. Veja:

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeObs: acrescentei uma cor de fundo apenas para facilitar a visualização do padding.

Ao lado temos a ferramenta do desenvolvedor, que nos mostra o padding afetado e apesar do erro estar no margin-left, o margin-right também é afetado por ser do mesmo eixo.

Modificando, o código ficará assim:

p {
    display: inline-block;
    margin-left: 50px;
    margin-right: 60px;
    margin-top: 30px;    
    margin-bottom: 40px;
    padding: 30px;
    height: 50px;
    width: 120px;
}

Resultado:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Caso tenha mais alguma dúvida, fique a vontade para perguntar. Bons estudos!