Curso IT Fundamentos CSS 025_Margens e Preenchimento

Margens

No CSS, margens e preenchimento são dois conceitos diferentes, ambos usados para controlar o espaço entre elementos e afetar o layout da página.

Efeito do exemplo

Margem (Margem externa)

A margem (margin) refere-se ao espaço entre um elemento e seus elementos adjacentes. As margens podem ser usadas para controlar a distância entre elementos e afetar o layout da página. As margens não possuem cor de fundo, são completamente transparentes e não afetam o tamanho real do elemento. Podem ser valores positivos ou negativos, a unidade pode ser pixels (px), porcentagem (%), em, etc.

Exemplo:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        margin: 10%;
7
        background-color: blue;
8
    }
9
    .example2 {
10
        margin: -50px 50px;
11
        background-color: green;
12
    }
13
    .example3 {
14
        margin: 10px 20px 30px 40px;
15
        background-color: red;
16
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>
4
    <br>
5
    <div class="base example3"></div>

Efeito: Efeito do exemplo Pode-se usar margin-top, margin-right, margin-bottom, margin-left para definir a margem de uma direção específica individualmente.

Exemplo:

1
    .example1 {
2
        margin-top: 100px;
3
        margin-right: 50px;
4
        margin-bottom: 80px;
5
        margin-left: 50px;
6
        background-color: blue;
7
        width: 200px;
8
        height: 200px;
9
    }

1
    <div class="example1"></div>

Efeito:

Efeito do exemplo

Preenchimento (Margem interna)

O preenchimento (padding) refere-se ao espaço entre o conteúdo interno de um elemento e a borda do elemento. O preenchimento pode ser usado para ajustar a distância entre o conteúdo interno e a borda, afetando o tamanho e o layout do elemento. O preenchimento herda a cor de fundo do elemento e afeta o tamanho real do elemento. Não suporta valores negativos, a unidade pode ser pixels (px), porcentagem (%), em, etc.

Exemplo:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        padding: 3%;
7
        background-color: blue;
8
    }
9
    .example2 {
10
        padding: 10px 50px ;
11
        background-color: green;
12
    }
13
    .example3 {
14
        padding: 10px 20px 30px 40px;
15
        background-color: red;
16
    }

1
    <div class="base example1">Teste de padding</div>
2
    <br>
3
    <div class="base example2">Teste de padding</div>
4
    <br>
5
    <div class="base example3">Teste de padding</div>

Efeito:

Efeito do exemplo Pode-se usar padding-top, padding-right, padding-bottom, padding-left para definir o preenchimento de uma direção específica individualmente.

Exemplo:

1
    .example1 {
2
        padding-top: 20px;
3
        padding-right: 50px;
4
        padding-bottom: 80px;
5
        padding-left: 10px;
6
        background-color: blue;
7
        width: 200px;
8
        height: 200px;
9
    }

1
    <div class="example1">Teste de padding</div>

Efeito: Efeito do exemplo

Margens

Margem (Margem externa)

Preenchimento (Margem interna)

Comentários