O Modelo de Caixa CSS Explicado: The CSS Box Model

O que é CSS Box Model?

Introdução ao CSS Box Model

O CSS Box Model é um conceito fundamental no CSS que descreve como os elementos HTML são representados no layout da página. Cada elemento é representado como uma caixa retangular composta por quatro áreas: conteúdo, padding, borda e margem.

Estrutura do Box Model

Content: A área onde o conteúdo do elemento é exibido.
Padding: Espaço entre o conteúdo e a borda.
Border: A borda ao redor do padding e do conteúdo.
Margin: Espaço fora da borda, separando o elemento de outros elementos.

+--------------------------------------+
|             Margin (A)               |
| +----------------------------------+ |
| |           Border (B)             | |
| | +------------------------------+ | |
| | |          Padding (C)         | | |
| | | +--------------------------+ | | |
| | | |        Content (D)       | | | |
| | | +--------------------------+ | | |
| | +------------------------------+ | |
| +----------------------------------+ |
+--------------------------------------+

+--------------------------------------+

| Margin (A) |

| +----------------------------------+ |

| | Border (B) | |

| | +------------------------------+ | |

| | | +--------------------------+ | | |

| | | +--------------------------+ | | |

| | +------------------------------+ | |

| +----------------------------------+ |

+--------------------------------------+

Imagine uma série de caixas aninhadas, uma dentro da outra, cada uma representando uma parte diferente do modelo de caixa do CSS:

Margem (A):

A camada mais externa ao redor da caixa.
É o espaço entre a borda da caixa e o próximo elemento.
Visualize isso como uma área levemente sombreada ao redor de tudo.

Borda (B):

Dentro da margem.
Representada por uma linha sólida que envolve o preenchimento e o conteúdo.
Pense nisso como uma moldura para a caixa.

Preenchimento (C):

Dentro da borda.
É o espaço entre a borda e o conteúdo.
Imagine isso como uma área levemente sombreada diferente dentro da borda, criando espaço ao redor do conteúdo.

Conteúdo (D):

A parte mais interna da caixa.
É onde o conteúdo real, como texto ou imagens, é colocado.

Exemplo Prático

Arquivo `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Box Model</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>CSS Box Model</h1>
    <div class="box-model">Conteúdo</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>CSS Box Model</title>

</head>

<body>

<h1>CSS Box Model</h1>

<div class="box-model">Conteúdo</div>

</body>

</html>

Arquivo `styles.css`

/* Estilos básicos */
body {
    font-family: Arial, sans-serif;
    padding: 20px;
}

.box-model {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid #333;
    margin: 20px;
    background-color: #f0f0f0;
}

/* Estilos básicos */

body {

font-family: Arial, sans-serif;

padding: 20px;

}

.box-model {

width: 200px;

height: 100px;

padding: 20px;

border: 5px solid #333;

margin: 20px;

background-color: #f0f0f0;

}

Explicação

Content: A área onde o texto “Conteúdo” é exibido.
Padding: Espaço de 20px ao redor do conteúdo.
Border: Borda de 5px de largura ao redor do padding.
Margin: Espaço de 20px fora da borda, separando o elemento de outros elementos.

Width e Height Properties

As propriedades width e height são usadas para definir a largura e a altura de um elemento. Elas controlam o tamanho da área de conteúdo da caixa.

Exemplo Prático

Arquivo `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Width e Height Properties</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Width e Height Properties</h1>
    <div class="box width-height">Conteúdo</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Width e Height Properties</title>

</head>

<body>

<h1>Width e Height Properties</h1>

<div class="box width-height">Conteúdo</div>

</body>

</html>

Arquivo `styles.css`

/* Estilos básicos */
body {
    font-family: Arial, sans-serif;
    padding: 20px;
}

.box {
    background-color: #f0f0f0;
    padding: 10px;
    margin-bottom: 10px;
}

/* Width e Height Properties */
.width-height {
    width: 200px;
    height: 100px;
    background-color: #d0e1f9;
}

/* Estilos básicos */

body {

font-family: Arial, sans-serif;

padding: 20px;

}

.box {

background-color: #f0f0f0;

padding: 10px;

margin-bottom: 10px;

}

/* Width e Height Properties */

.width-height {

width: 200px;

height: 100px;

background-color: #d0e1f9;

}

Explicação

width: Define a largura da área de conteúdo da caixa (200px).
height: Define a altura da área de conteúdo da caixa (100px).

Overflow Property

A propriedade overflow controla como o conteúdo que excede a área de um elemento é tratado. Os valores comuns são visible, hidden, scroll e auto.

Exemplo Prático

Arquivo `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Overflow Property</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Overflow Property</h1>
    <div class="box overflow">Conteúdo muito longo que não cabe na caixa.</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Overflow Property</title>

</head>

<body>

<h1>Overflow Property</h1>

<div class="box overflow">Conteúdo muito longo que não cabe na caixa.</div>

</body>

</html>

Arquivo `styles.css`

/* Estilos básicos */
body {
    font-family: Arial, sans-serif;
    padding: 20px;
}

.box {
    background-color: #f0f0f0;
    padding: 10px;
    margin-bottom: 10px;
}

/* Overflow Property */
.overflow {
    width: 200px;
    height: 50px;
    overflow: hidden; /* Pode ser auto, scroll, visible, ou hidden */
    background-color: #f9d0d0;
}

/* Estilos básicos */

body {

font-family: Arial, sans-serif;

padding: 20px;

}

.box {

background-color: #f0f0f0;

padding: 10px;

margin-bottom: 10px;

}

/* Overflow Property */

.overflow {

width: 200px;

height: 50px;

overflow: hidden; /* Pode ser auto, scroll, visible, ou hidden */

background-color: #f9d0d0;

}

Explicação

overflow: hidden: O conteúdo que excede a área da caixa será ocultado.

Padding e Margin Properties

Introdução

As propriedades padding e margin são usadas para controlar o espaço interno e externo de um elemento, respectivamente.

Exemplo Prático

Arquivo `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Padding e Margin Properties</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Padding e Margin Properties</h1>
    <div class="box padding-margin">Conteúdo</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Padding e Margin Properties</title>

</head>

<body>

<h1>Padding e Margin Properties</h1>

<div class="box padding-margin">Conteúdo</div>

</body>

</html>

Arquivo `styles.css`

/* Estilos básicos */
body {
    font-family: Arial, sans-serif;
    padding: 20px;
}

.box {
    background-color: #f0f0f0;
    padding: 10px;
    margin-bottom: 10px;
}

/* Padding e Margin Properties */
.padding-margin {
    width: 200px;
    height: 100px;
    padding: 20px; /* Espaço interno */
    margin: 20px; /* Espaço externo */
    background-color: #d0f9d0;
}

/* Estilos básicos */

body {

font-family: Arial, sans-serif;

padding: 20px;

}

.box {

background-color: #f0f0f0;

padding: 10px;

margin-bottom: 10px;

}

/* Padding e Margin Properties */

.padding-margin {

width: 200px;

height: 100px;

padding: 20px; /* Espaço interno */

margin: 20px; /* Espaço externo */

background-color: #d0f9d0;

}

Explicação

padding: Define o espaço interno ao redor do conteúdo da caixa (20px).
margin: Define o espaço externo ao redor da borda da caixa (20px).

Border Properties

As propriedades de borda (border-width, border-color, border-style, border-radius) são usadas para definir a largura, cor, estilo e raio da borda de um elemento.

Exemplo Prático

Arquivo `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border Properties</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Border Properties</h1>
    <div class="box border">Conteúdo</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Border Properties</title>

</head>

<body>

<h1>Border Properties</h1>

<div class="box border">Conteúdo</div>

</body>

</html>

Arquivo `styles.css`

/* Estilos básicos */
body {
    font-family: Arial, sans-serif;
    padding: 20px;
}

.box {
    background-color: #f0f0f0;
    padding: 10px;
    margin-bottom: 10px;
}

/* Border Properties */
.border {
    width: 200px;
    height: 100px;
    border-width: 5px;
    border-color: #333;
    border-style: solid;
    border-radius: 10px; /* Bordas arredondadas */
    background-color: #f9f0d0;
}

/* Estilos básicos */

body {

font-family: Arial, sans-serif;

padding: 20px;

}

.box {

background-color: #f0f0f0;

padding: 10px;

margin-bottom: 10px;

}

/* Border Properties */

.border {

width: 200px;

height: 100px;

border-width: 5px;

border-color: #333;

border-style: solid;

border-radius: 10px; /* Bordas arredondadas */

background-color: #f9f0d0;

}

Explicação

border-width: Define a largura da borda (5px).
border-color: Define a cor da borda (#333).
border-style: Define o estilo da borda (solid).
border-radius: Define o raio das bordas arredondadas (10px).

Border Shorthand

A propriedade abreviada border permite definir a largura, estilo e cor da borda em uma única linha.

Exemplo Prático

Arquivo `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border Shorthand</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Border Shorthand</h1>
    <div class="box border-shorthand">Conteúdo</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Border Shorthand</title>

</head>

<body>

<h1>Border Shorthand</h1>

<div class="box border-shorthand">Conteúdo</div>

</body>

</html>

Arquivo `styles.css`

/* Estilos básicos */
body {
    font-family: Arial, sans-serif;
    padding: 20px;
}

.box {
    background-color: #f0f0f0;
    padding: 10px;
    margin-bottom: 10px;
}

/* Border Shorthand */
.border-shorthand {
    width: 200px;
    height: 100px;
    border: 5px solid #333; /* Shorthand para largura, estilo e cor */
    border-radius: 10px; /* Bordas arredondadas */
    background-color: #d0d0f9;
}

/* Estilos básicos */

body {

font-family: Arial, sans-serif;

padding: 20px;

}

.box {

background-color: #f0f0f0;

padding: 10px;

margin-bottom: 10px;

}

/* Border Shorthand */

.border-shorthand {

width: 200px;

height: 100px;

border: 5px solid #333; /* Shorthand para largura, estilo e cor */

border-radius: 10px; /* Bordas arredondadas */

background-color: #d0d0f9;

}

Explicação

border: Define a largura (5px), estilo (solid) e cor (#333) da borda em uma única linha.
border-radius: Define o raio das bordas arredondadas (10px).

Compreendendo as Três Maneiras de Definir Margens, Bordas e Preenchimento

O CSS permite que você defina cada um dos três elementos externos da caixa CSS — as margens, as bordas e o preenchimento — de três maneiras diferentes:

Definir uma medida única para todos os lados usando a propriedade margin, a propriedade border ou a propriedade padding.
Definir cada lado separadamente usando as propriedades individuais. Por exemplo, para definir a margem, você usaria as propriedades margin-top, margin-right, margin-bottom e margin-left.
Definir cada lado com uma única declaração usando propriedades abreviadas.

As subseções a seguir mostram como usar cada um desses métodos.

1. Medida Única para Todos os Lados

Você pode definir o mesmo valor para os quatro lados de um elemento usando as propriedades margin, border ou padding.

/* Define a mesma margem para todos os lados */
.elemento {
    margin: 20px;
}

/* Define a mesma borda para todos os lados */
.elemento {
    border: 2px solid black;
}

/* Define o mesmo preenchimento para todos os lados */
.elemento {
    padding: 10px;
}

/* Define a mesma margem para todos os lados */

.elemento {

margin: 20px;

}

/* Define a mesma borda para todos os lados */

.elemento {

border: 2px solid black;

}

/* Define o mesmo preenchimento para todos os lados */

.elemento {

padding: 10px;

}

2. Definir Cada Lado Separadamente

Para ter um controle mais preciso, você pode definir valores diferentes para cada lado de um elemento usando as propriedades individuais.

/* Define margens diferentes para cada lado */
.elemento {
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 20px;
    margin-left: 25px;
}

/* Define bordas diferentes para cada lado */
.elemento {
    border-top: 2px solid red;
    border-right: 3px dashed green;
    border-bottom: 4px dotted blue;
    border-left: 5px double black;
}

/* Define preenchimentos diferentes para cada lado */
.elemento {
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 15px;
    padding-left: 20px;
}

/* Define margens diferentes para cada lado */

.elemento {

margin-top: 10px;

margin-right: 15px;

margin-bottom: 20px;

margin-left: 25px;

}

/* Define bordas diferentes para cada lado */

.elemento {

border-top: 2px solid red;

border-right: 3px dashed green;

border-bottom: 4px dotted blue;

border-left: 5px double black;

}

/* Define preenchimentos diferentes para cada lado */

.elemento {

padding-top: 5px;

padding-right: 10px;

padding-bottom: 15px;

padding-left: 20px;

}

3. Propriedades Abreviadas

Você pode usar propriedades abreviadas para definir valores para todos os lados de um elemento em uma única declaração.

/* Define margens usando a propriedade abreviada */
.elemento {
    margin: 10px 15px 20px 25px; /* top right bottom left */
}

/* Define bordas usando a propriedade abreviada */
.elemento {
    border: 2px solid black; /* largura estilo cor */
}

/* Define preenchimentos usando a propriedade abreviada */
.elemento {
    padding: 5px 10px 15px 20px; /* top right bottom left */
}

/* Define margens usando a propriedade abreviada */

.elemento {

margin: 10px 15px 20px 25px; /* top right bottom left */

}

/* Define bordas usando a propriedade abreviada */

.elemento {

border: 2px solid black; /* largura estilo cor */

}

/* Define preenchimentos usando a propriedade abreviada */

.elemento {

padding: 5px 10px 15px 20px; /* top right bottom left */

}

Como Testar

Crie um arquivo chamado index.html e copie o conteúdo do exemplo acima.
Crie um arquivo chamado styles.css na mesma pasta e copie o conteúdo do exemplo CSS acima.
Abra o arquivo index.html em um navegador para ver os estilos aplicados.

Vamos criar um arquivo index.html que demonstra os conceitos de definir margens, bordas e preenchimento de três maneiras diferentes. Este exemplo incluirá explicações e exemplos práticos para cada método.

Arquivo `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Box Model Demonstration</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Understanding Margins, Borders, and Padding in CSS</h1>

    <section>
        <h2>1. Single Measurement for All Sides</h2>
        <div class="single-measurement">
            <p>Single measurement for margin, border, and padding.</p>
        </div>
    </section>

    <section>
        <h2>2. Individual Properties for Each Side</h2>
        <div class="individual-properties">
            <p>Individual properties for margin, border, and padding.</p>
        </div>
    </section>

    <section>
        <h2>3. Shorthand Properties</h2>
        <div class="shorthand-properties">
            <p>Shorthand properties for margin, border, and padding.</p>
        </div>
    </section>

    <section>
        <h2>4. Border Properties</h2>
        <div class="border-properties">
            <div class="border-width">
                <p>Border Width</p>
            </div>
            <div class="border-color">
                <p>Border Color</p>
            </div>
            <div class="border-style">
                <p>Border Style</p>
            </div>
            <div class="border-radius">
                <p>Border Radius</p>
            </div>
        </div>
    </section>
</body>
</html>

<!DOCTYPE html>

<head>

<title>CSS Box Model Demonstration</title>

</head>

<body>

<h1>Understanding Margins, Borders, and Padding in CSS</h1>

<h2>1. Single Measurement for All Sides</h2>

<p>Single measurement for margin, border, and padding.</p>

</div>

</section>

<h2>2. Individual Properties for Each Side</h2>

<p>Individual properties for margin, border, and padding.</p>

</div>

</section>

<h2>3. Shorthand Properties</h2>

<p>Shorthand properties for margin, border, and padding.</p>

</div>

</section>

<h2>4. Border Properties</h2>

<p>Border Width</p>

</div>

<p>Border Color</p>

</div>

<p>Border Style</p>

</div>

<p>Border Radius</p>

</div>

</section>

</body>

</html>

Arquivo `styles.css`

/* Estilos gerais */
body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

h1, h2 {
    color: #333;
}

/* 1. Single Measurement for All Sides */
.single-measurement {
    margin: 20px; /* Define a mesma margem para todos os lados */
    border: 5px solid #007BFF; /* Define a mesma borda para todos os lados */
    padding: 15px; /* Define o mesmo preenchimento para todos os lados */
    background-color: #f0f8ff;
}

/* 2. Individual Properties for Each Side */
.individual-properties {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
    border-top: 2px solid #28a745;
    border-right: 4px solid #28a745;
    border-bottom: 6px solid #28a745;
    border-left: 8px solid #28a745;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 15px;
    padding-left: 20px;
    background-color: #e9f7ef;
}

/* 3. Shorthand Properties */
.shorthand-properties {
    margin: 10px 20px 30px 40px; /* top right bottom left */
    border: 2px solid #dc3545; /* Define a mesma borda para todos os lados */
    padding: 5px 10px 15px 20px; /* top right bottom left */
    background-color: #f8d7da;
}

/* 4. Border Properties */
.border-properties {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.border-properties > div {
    width: 200px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
}

/* Border Width */
.border-width {
    border-width: 10px; /* Define a largura da borda */
    border-style: solid; /* Define o estilo da borda */
    border-color: #007BFF; /* Define a cor da borda */
}

/* Border Color */
.border-color {
    border-width: 5px; /* Define a largura da borda */
    border-style: solid; /* Define o estilo da borda */
    border-color: #28a745; /* Define a cor da borda */
}

/* Border Style */
.border-style {
    border-width: 5px; /* Define a largura da borda */
    border-style: dashed; /* Define o estilo da borda */
    border-color: #dc3545; /* Define a cor da borda */
}

/* Border Radius */
.border-radius {
    border-width: 5px; /* Define a largura da borda */
    border-style: solid; /* Define o estilo da borda */
    border-color: #ffc107; /* Define a cor da borda */
    border-radius: 15px; /* Define o raio da borda */
}

/* Estilos gerais */

body {

font-family: Arial, sans-serif;

margin: 20px;

}

h1, h2 {

color: #333;

}

/* 1. Single Measurement for All Sides */

.single-measurement {

margin: 20px; /* Define a mesma margem para todos os lados */

border: 5px solid #007BFF; /* Define a mesma borda para todos os lados */

padding: 15px; /* Define o mesmo preenchimento para todos os lados */

background-color: #f0f8ff;

}

/* 2. Individual Properties for Each Side */

.individual-properties {

margin-top: 10px;

margin-right: 20px;

margin-bottom: 30px;

margin-left: 40px;

border-top: 2px solid #28a745;

border-right: 4px solid #28a745;

border-bottom: 6px solid #28a745;

border-left: 8px solid #28a745;

padding-top: 5px;

padding-right: 10px;

padding-bottom: 15px;

padding-left: 20px;

background-color: #e9f7ef;

}

/* 3. Shorthand Properties */

.shorthand-properties {

margin: 10px 20px 30px 40px; /* top right bottom left */

border: 2px solid #dc3545; /* Define a mesma borda para todos os lados */

padding: 5px 10px 15px 20px; /* top right bottom left */

background-color: #f8d7da;

}

/* 4. Border Properties */

.border-properties {

display: flex;

flex-wrap: wrap;

gap: 20px;

}

.border-properties > div {

width: 200px;

height: 100px;

display: flex;

align-items: center;

justify-content: center;

background-color: #f0f0f0;

}

/* Border Width */

.border-width {

border-width: 10px; /* Define a largura da borda */

border-style: solid; /* Define o estilo da borda */

border-color: #007BFF; /* Define a cor da borda */

}

/* Border Color */

.border-color {

border-width: 5px; /* Define a largura da borda */

border-style: solid; /* Define o estilo da borda */

border-color: #28a745; /* Define a cor da borda */

}

/* Border Style */

.border-style {

border-width: 5px; /* Define a largura da borda */

border-style: dashed; /* Define o estilo da borda */

border-color: #dc3545; /* Define a cor da borda */

}

/* Border Radius */

.border-radius {

border-width: 5px; /* Define a largura da borda */

border-style: solid; /* Define o estilo da borda */

border-color: #ffc107; /* Define a cor da borda */

border-radius: 15px; /* Define o raio da borda */

}

Explicação dos Arquivos

index.html:
- Inclui a referência ao arquivo CSS externo styles.css usando a tag <link> no <head>.
- Contém três seções, cada uma demonstrando um dos métodos de definir margens, bordas e preenchimento.
styles.css:
- 1. Single Measurement for All Sides:
  - Define a mesma margem, borda e preenchimento para todos os lados do elemento .single-measurement.
- 2. Individual Properties for Each Side:
  - Define margens, bordas e preenchimentos específicos para cada lado do elemento .individual-properties.
- 3. Shorthand Properties:
  - Usa propriedades abreviadas para definir margens, bordas e preenchimentos do elemento .shorthand-properties.

Resultado Esperado

Single Measurement for All Sides: O elemento .single-measurement terá uma margem de 20px, uma borda de 5px sólida azul e um preenchimento de 15px em todos os lados.
Individual Properties for Each Side: O elemento .individual-properties terá margens, bordas e preenchimentos diferentes para cada lado.
Shorthand Properties: O elemento .shorthand-properties terá margens, bordas e preenchimentos definidos usando propriedades abreviadas.

O CSS Box Model é essencial para entender como os elementos são renderizados e como você pode controlar o layout da sua página. Compreender as propriedades de largura, altura, overflow, padding, margem e borda permitirá que você crie layouts mais precisos e esteticamente agradáveis. Experimente os exemplos fornecidos e veja como cada propriedade afeta o layout dos elementos.

O que é CSS Box Model?

Introdução ao CSS Box Model

Estrutura do Box Model

Exemplo Prático

Arquivo index.html

Arquivo styles.css

Explicação

Width e Height Properties

Exemplo Prático

Arquivo index.html

Arquivo styles.css

Explicação

Overflow Property

Exemplo Prático

Arquivo index.html

Arquivo styles.css

Explicação

Padding e Margin Properties

Introdução

Exemplo Prático

Arquivo index.html

Arquivo styles.css

Explicação

Border Properties

Exemplo Prático

Arquivo index.html

Arquivo styles.css

Explicação

Border Shorthand

Exemplo Prático

Arquivo index.html

Arquivo styles.css

Explicação

Compreendendo as Três Maneiras de Definir Margens, Bordas e Preenchimento

1. Medida Única para Todos os Lados

2. Definir Cada Lado Separadamente

3. Propriedades Abreviadas

Como Testar

Arquivo index.html

Arquivo styles.css

Explicação dos Arquivos

Resultado Esperado

Related Posts

Arquivo `index.html`

Arquivo `styles.css`

Arquivo `index.html`

Arquivo `styles.css`

Arquivo `index.html`

Arquivo `styles.css`

Arquivo `index.html`

Arquivo `styles.css`

Arquivo `index.html`

Arquivo `styles.css`

Arquivo `index.html`

Arquivo `styles.css`

Arquivo `index.html`

Arquivo `styles.css`