🎨 CSS

CSS: Propriedades box-sizing, margin, padding, width e height

• 6 min de leitura

CSS: Propriedades box-sizing, margin, padding, width e height

Neste tutorial, exploraremos cinco propriedades fundamentais do CSS que ajudam a controlar o layout e o espaçamento dos elementos em uma página web. Vamos abordar a teoria, exemplos práticos e referências confiáveis do W3Schools e MDN Web Docs.

1. A Propriedade box-sizing

Definição

A propriedade box-sizing é usada para alterar o comportamento padrão do modelo de caixa (box model) no cálculo das larguras (width) e alturas (height) dos elementos.

Por padrão, o modelo de caixa considera apenas o conteúdo de um elemento para calcular suas dimensões. Quando box-sizing é configurado como border-box, as dimensões incluem o padding e as bordas, o que facilita o controle e evita cálculos adicionais de espaçamento.

Vantagens do box-sizing: border-box

  • Evita que o tamanho total de um elemento exceda o esperado ao adicionar padding ou border.
  • Facilita o design responsivo ao trabalhar com layouts fluidos.

Sintaxe

box-sizing: content-box | border-box;
  • content-box (valor padrão): O width e height incluem apenas o conteúdo do elemento, excluindo padding e borda.
  • border-box: O width e height incluem o conteúdo, padding e bordas.

Exemplo Prático

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo Box-Sizing</title>
    <style>
        .content-box, .border-box {
            display: inline-block;
            text-align: center;
        }
        .content-box {
            box-sizing: content-box;
            width: 200px;
            padding: 20px;
            border: 10px solid black;
            background-color: lightblue;
        }
        .border-box {
            box-sizing: border-box;
            width: 200px;
            padding: 20px;
            border: 10px solid black;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <h4>Box Sizing</h4>
    <div class="content-box">Content-Box</div>
    <div class="border-box">Border-Box</div>
</body>
</html>
```  Exemplo Box-Sizing .content-box, .border-box { display: inline-block; text-align: center; } .content-box { box-sizing: content-box; width: 200px; padding: 20px; border: 10px solid black; background-color: lightblue; } .border-box { box-sizing: border-box; width: 200px; padding: 20px; border: 10px solid black; background-color: lightgreen; } 

#### Resultado do exemplo acima - Box Sizing

Content-Box

Border-Box

No exemplo acima, observe que o tamanho final de `content-box` é maior do que o declarado no CSS devido ao acréscimo do `padding` e da `border`. Já no `border-box`, o tamanho final permanece conforme declarado.

#### Referências

*   [W3Schools: box-sizing](https://www.w3schools.com/css/css3_box-sizing.asp)
*   [MDN: box-sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)

* * *

2\. A Propriedade `margin`
--------------------------

### Definição

A propriedade `margin` define a área de espaçamento externa de um elemento, ou seja, o espaço entre o elemento e os outros ao seu redor.

Você pode usar a abreviação `margin` para definir todas as margens simultaneamente ou controlar cada lado individualmente com:

*   `margin-top` (margem superior)
*   `margin-right` (margem direita)
*   `margin-bottom` (margem inferior)
*   `margin-left` (margem esquerda)

### Formas de Implementação

*   **Abreviada**: Define as margens de todos os lados de uma só vez. `margin: 10px 15px 20px 25px; /* top, right, bottom, left */`
*   **Individual**: Define margens específicas para cada lado. `margin-top: 10px; margin-right: 15px; margin-bottom: 20px; margin-left: 25px;`
*   **Automática**: Usada frequentemente para centralizar elementos horizontalmente. `margin: auto;`

### Colapso de Margens

Uma característica importante do `margin` é o **colapso de margens**. Quando duas margens verticais de elementos adjacentes se encontram, a maior delas prevalece em vez de serem somadas.

### Sintaxe

margin: auto | length | percentage;


*   **`auto`**: O navegador calcula automaticamente a margem. Geralmente usado para centralizar elementos horizontalmente.
*   **`length`**: Define um valor fixo (em px, em, rem, etc.).
*   **`percentage`**: Define uma margem relativa ao tamanho do elemento pai.

### Exemplo Prático
Exemplo Margin

Resultado do exemplo acima - Margin

Margem Abreviada
Margem Auto
Margem Colapsada
``` Exemplo Margin .result { border: 2px solid rgb(240, 26, 26); } .margins { width: 200px; height: 200px; text-align: center; } .margin-abreviada { margin: 20px 10px 30px 40px; /\* top, right, bottom, left \*/ background-color: rgb(98, 228, 47); } .margin-auto { margin: auto; background-color: lightcoral; } .margin-collapse { margin: 30px; background-color: lightblue; }

Resultado do exemplo acima - Margin

Margem Abreviada

Margem Auto

Margem Colapsada

No exemplo, margin: auto centraliza o elemento horizontalmente dentro do elemento pai, enquanto margin-collapse demonstra como margens podem se sobrepor.

Referências

3. A Propriedade padding

Definição

A propriedade padding define o espaço interno entre o conteúdo de um elemento e suas bordas. Assim como margin, pode ser usada como abreviação ou com propriedades específicas para cada lado:

  • padding-top (preenchimento superior)
  • padding-right (preenchimento direito)
  • padding-bottom (preenchimento inferior)
  • padding-left (preenchimento esquerdo)

Formas de Implementação

  • Abreviada: Define os preenchimentos de todos os lados de uma só vez. padding: 10px 15px 20px 25px; /* top, right, bottom, left */
  • Individual: Define preenchimentos específicos para cada lado. padding-top: 10px; padding-right: 15px; padding-bottom: 20px; padding-left: 25px;

Impacto do padding

Ao adicionar padding, o espaço interno aumenta, mas isso não altera a posição externa do elemento. O preenchimento afeta apenas o conteúdo dentro do elemento.

Sintaxe

padding: length | percentage;
  • length: Valor fixo (px, em, rem, etc.).
  • percentage: Relativo ao tamanho do elemento pai.

Exemplo Prático

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo Padding</title>
    <style>
       .box {
            border: 1px solid navy;
        }
        .padding-abreviado {
            padding: 10px 15px 20px 25px; /* top, right, bottom, left */
            background-color: rgb(255, 242, 224);
        }
        .padding-uniforme {
            padding: 20px;
            background-color: rgb(252, 255, 224);
        }
        .padding-percentage {
            padding: 5%;
            width: 80%;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <h4>Padding</h4>
    <div class="box padding-abreviado">Padding Abreviado</div>
    <div class="box padding-uniforme">Padding Uniforme</div>
    <div class="box padding-percentage">Padding em Porcentagem</div>
</body>
</html>
```  Exemplo Padding .padding { border: 1px solid navy; } .padding-abreviado { padding: 10px 15px 20px 25px; /\* top, right, bottom, left \*/ background-color: rgb(255, 242, 224); } .padding-uniforme { padding: 20px; background-color: rgb(252, 255, 224); } .padding-percentage { padding: 5%; width: 80%; background-color: lightgreen; } 

#### Resultado do exemplo acima - Padding

Padding Abreviado

Padding Uniforme

Padding em Porcentagem

#### Referências

*   [W3Schools: padding](https://www.w3schools.com/css/css_padding.asp)
*   [MDN: padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)

* * *

4\. As Propriedades `width` e `height`
--------------------------------------

### Definição

As propriedades `width` (largura) e `height` (altura) definem o tamanho de um elemento. Elas podem ser especificadas como valores fixos, percentuais ou automáticos.

*   **`width`**: Controla a largura de um elemento.
*   **`height`**: Controla a altura de um elemento.

### Valores Comuns

*   **`auto`**: Valor padrão. O navegador calcula automaticamente o tamanho com base no conteúdo e no contexto do elemento pai.
*   **`length`**: Define um valor fixo (em px, em, rem, etc.).
*   **`percentage`**: Define um tamanho relativo ao elemento pai.
*   **`max-width` e `max-height`**: Limitam o tamanho máximo do elemento.
*   **`min-width` e `min-height`**: Estabelecem o tamanho mínimo.

### Sintaxe

width: auto | length | percentage; height: auto | length | percentage;


### Exemplo Prático
Exemplo Width e Height

Width e Height

Tamanho Fixo
Tamanho em Porcentagem
Tamanho Automático
``` Exemplo Width e Height .box { border: 2px solid navy; text-align: center; } .box-fixed { width: 200px; height: 100px; background-color: rgb(238, 26, 79); } .box-percentage { width: 50%; height: 150px; background-color: rgb(184, 230, 173); } .box-auto { width: auto; height: auto; background-color: rgb(248, 244, 13); }

Resultado do exemplo acima - Width e Height

Tamanho Fixo

Tamanho em Porcentagem

Tamanho Automático

No exemplo acima, diferentes configurações de width e height demonstram como os valores afetam o tamanho dos elementos.

Referências

[MDN: width](https://developer.mozilla

W3Schools: width e height

Comentários

Não foi possível carregar os comentários no momento.

Deixe seu comentário

Posts Relacionados

Continue sua leitura com conteúdos parecidos.