Propriedades CSS relacionadas ao modelo de caixa

Articles

Este artigo explica as propriedades CSS relacionadas ao modelo de caixa.

Você pode aprender sobre os casos de uso e a sintaxe para propriedades como width, height e margin.

YouTube Video

HTML para Visualização

css-box.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>Box Model Related CSS Properties</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-box.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Model Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Model Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>width and height</h3>
 23            <section>
 24                <header><h4>width: 250px; height: 150px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="width-height-fixed">Fixed size(250px,150px)</div>
 27                </section>
 28            </section>
 29            <section>
 30                <header><h4>width: 50%; height: 50%;</h4></header>
 31                <section class="sample-view">
 32                    <div class="width-height-percent">Percentage size(50%,50%)</div>
 33                </section>
 34            </section>
 35            <section>
 36                <header><h4>width: min-content; height: min-content;</h4></header>
 37                <section class="sample-view">
 38                    <div class="width-height-min-content">This is an example of min-content.</div>
 39                </section>
 40            </section>
 41            <section>
 42                <header><h4>width: max-content; height: max-content;</h4></header>
 43                <section class="sample-view">
 44                    <div class="width-height-max-content">This is an example of max-content.</div>
 45                </section>
 46            </section>
 47            <section>
 48                <header><h4>width: fit-content; max-width: 150px;</h4></header>
 49                <section class="sample-view">
 50                    <div class="width-height-fit-content">This is an example of fit-content.</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>margin and padding</h3>
 56            <section style="height: auto;">
 57                <h4>Margin &amp; padding</h4>
 58                <header><h4>margin: 20px; padding: 15px;</h4></header>
 59                <section class="sample-view">
 60                    <div class="margin-padding">margin & padding</div>
 61                </section>
 62            </section>
 63            <section style="height: auto;">
 64                <h4>Margin only(no padding)</h4>
 65                <header><h4>margin: 20px; padding: 0;</h4></header>
 66                <section class="sample-view">
 67                    <div class="margin-only">margin only</div>
 68                </section>
 69            </section>
 70            <section style="height: auto;">
 71                <h4>No margin &amp; padding example</h4>
 72                <header><h4>margin: 0; padding: 0;</h4></header>
 73                <section class="sample-view">
 74                    <div class="no-margin">no margin & padding</div>
 75                </section>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>box-sizing</h3>
 80            <section style="height: auto;">
 81                <header><h4>box-sizing: content-box</h4></header>
 82                <section class="sample-view">
 83                    <div style="width: 300px;">width: 300px</div>
 84                    <div class="content-box">Content Box</div>
 85                    <div style="width: 360px;">width: 360px</div>
 86                </section>
 87            </section>
 88            <section>
 89                <header><h4>box-sizing: border-box</h4></header>
 90                <section class="sample-view">
 91                    <div style="width: 300px;">width: 300px</div>
 92                    <div class="border-box">Border Box</div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>visibility</h3>
 98            <section>
 99                <header><h4>visibility: visible</h4></header>
100                <section class="sample-view">
101                    <div class="visibility-visible">Visible Box</div>
102                </section>
103                <header><h4>visibility: hidden</h4></header>
104                <section class="sample-view">
105                    <div class="visibility-hidden">Hidden Box</div>
106                </section>
107                <header><h4>visibility: collapse</h4></header>
108                <section class="sample-view">
109                    <div class="visibility-collapse">Collapsed Box (Hold layout space)</div>
110                </section>
111                <header><h4>HTML</h4></header>
112                <pre>&lt;div class="visibility-collapse"&gt;Collapsed Box (Hold layout space)&lt;/div&gt;</pre>
113                <header><h4>visibility: collapse</h4></header>
114                <section class="sample-view">
115                    <table style="height: 200px; margin: auto;">
116                        <tr class="visibility-collapse">
117                            <td>Cell 1 (Remove layout space)</td>
118                        </tr>
119                        <tr>
120                            <td>Cell 2</td>
121                        </tr>
122                    </table>
123                </section>
124                <header><h4>HTML</h4></header>
125<pre>
126&lt;table style="height: 200px; margin: auto;"&gt;
127    &lt;tr class="visibility-collapse"&gt;
128        &lt;td&gt;Cell 1 (Remove layout space)&lt;/td&gt;
129    &lt;/tr&gt;
130    &lt;tr&gt;
131        &lt;td&gt;Cell 2&lt;/td&gt;
132    &lt;/tr&gt;
133&lt;/table&gt;
134</pre>
135            </section>
136        </article>
137    </main>
138</body>
139</html>

Relacionado ao Modelo de Caixa

Propriedades `width` e `height`

 1.width-height-fixed {
 2    width: 250px;
 3    height: 150px;
 4    background-color: lightblue;
 5}
 6
 7.width-height-percent {
 8    width: 50%;
 9    height: 50%;
10    background-color: lightblue;
11}
12
13.width-height-min-content {
14    width: min-content;
15    height: min-content;
16    background-color: lightblue;
17}
18
19.width-height-max-content {
20    width: max-content;
21    height: max-content;
22    background-color: lightblue;
23}
24
25.width-height-fit-content {
26    width: fit-content;
27    max-width: 150px;
28    background-color: lightblue;
29}

As propriedades width e height são usadas no CSS para especificar a largura e a altura de um elemento. Elas são particularmente usadas ao definir o tamanho de elementos de bloco, imagens, vídeos, etc.

Na classe width-height-fixed, valores fixos são especificados para largura e altura.
Na classe width-height-percent, valores percentuais são especificados para largura e altura.

Valores que podem ser especificados

As propriedades width e height podem ter os seguintes valores.

auto: Tamanho padrão. Ajusta automaticamente o tamanho em relação ao elemento pai.
Valores fixos: Especifica uma largura fixa em pixels, porcentagens ou unidades relativas.(ex: 100px, 50%, 10rem)
- Por exemplo, 250px define o tamanho do elemento como 250 pixels, e 50% define como 50% do tamanho do elemento pai.
min-content: Ajusta-se ao tamanho mínimo do conteúdo.
max-content: Ajusta-se ao tamanho máximo do conteúdo.
fit-content: Ajusta o tamanho do elemento adequadamente com base no tamanho do conteúdo.

Especificando Valores Mínimos e Máximos

min-width, max-width, min-height e max-height são propriedades CSS usadas para definir restrições de tamanho em relação à largura e altura de um elemento. Com elas, você pode garantir que um elemento permaneça dentro de um intervalo de tamanho específico.

Propriedades `margin` e `padding`

 1.margin-padding {
 2    margin: 20px; /* Margin outside the element */
 3    padding: 15px; /* Padding inside the element */
 4    border: 1px solid #333;
 5    background-color: lightblue;
 6    width: 300px;
 7    height: 40px;
 8}
 9
10.margin-only {
11    margin: 20px; /* Margin outside the element */
12    padding: 0; /* No padding inside the element */
13    border: 1px solid #333;
14    background-color: lightblue;
15    width: 300px;
16    height: 40px;
17}
18
19.no-margin {
20    margin: 0; /* No margin outside the element */
21    padding: 0; /* No padding inside the element */
22    border: 1px solid #333;
23    background-color: lightblue;
24    width: 300px;
25    height: 40px;
26}

Margin e padding são propriedades do CSS usadas para controlar os espaços externos e internos dos elementos dentro do modelo de caixa. Elas são usadas para ajustar o espaço entre os elementos e para melhorar a aparência.

Na classe margin-padding, tanto margin quanto padding são especificados. Há o espaço de margin fora da borda sólida e o espaço de padding dentro da borda sólida.
Na classe margin-only, apenas o margin é especificado. Você pode ver que a área azul é menor em comparação com a classe margin-padding, pois não há espaço de padding dentro da borda sólida.
Na classe no-margin, tanto margin quanto padding são definidos como 0. Você pode ver que a área azul é empurrada completamente para a esquerda porque não há espaço de margin fora da borda sólida.

Dessa forma, a propriedade margin define o espaço externo de um elemento, ajustando a distância entre os elementos. Por outro lado, a propriedade padding define o espaço interno de um elemento, ajustando a distância entre o conteúdo e a borda.

Propriedade `margin`

A propriedade margin define o espaço externo (margem) de um elemento. É usada para criar espaço entre elementos adjacentes. Os seguintes valores podem ser especificados:.
Valores fixos: Você pode especificar o tamanho da margem em pixels, unidades relativas (em, rem) ou porcentagens.(ex: 10px, 1em, 5%)
auto: Útil para centralizar elementos de bloco. Quando a largura é especificada, ela ajusta automaticamente as margens esquerda e direita.
Valores positivos e negativos: Valores positivos expandem o espaço, enquanto valores negativos aproximam os elementos.

Notação compacta:

 1div.one-value {
 2    margin: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    margin: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    margin: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    margin: 10px 5px 15px 20px;
18}

A propriedade margin pode aceitar de um a quatro valores.

Um valor: Aplica-se a todos os lados.
Dois valores: O primeiro aplica-se ao topo e à base, o segundo aplica-se à esquerda e à direita.
Três valores: Aplica-se na ordem de topo, lados esquerdo e direito, base.
Quatro valores: Aplica-se na ordem de topo, direita, base, esquerda.

Propriedade `padding`

Função:

A propriedade padding define o espaço interno (recuo) de um elemento. É usada para criar espaço entre o conteúdo e a borda de um elemento. Os seguintes valores podem ser especificados:.
Valores fixos: Especifica o tamanho do preenchimento (padding).(ex: 10px, 1em, 5%)
Valores negativos não podem ser utilizados. Os valores de preenchimento (padding) só podem ser especificados como números positivos.

Notação compacta:

 1div.one-value {
 2    padding: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    padding: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    padding: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    padding: 10px 5px 15px 20px;
18}

Assim como o margin, você pode especificar de um a quatro valores.

Um valor: Aplica-se a todos os lados.
Dois valores: O primeiro aplica-se ao topo e à base, o segundo aplica-se à esquerda e à direita.
Três valores: Aplica-se na ordem de topo, lados esquerdo e direito, base.
Quatro valores: Aplica-se na ordem de topo, direita, base, esquerda.

Propriedade `box-sizing`

 1/* Default content-box : 300px + 2 * 20px + 2 * 10px = 360px */
 2.content-box {
 3    width: 300px;
 4    padding: 20px;
 5    border: 10px solid blue;
 6    box-sizing: content-box;
 7    background-color: lightblue;
 8}
 9
10/* Using border-box */
11.border-box {
12    width: 300px;
13    padding: 20px;
14    border: 10px solid red;
15    box-sizing: border-box;
16    background-color: lightcoral;
17}

box-sizing é uma propriedade CSS que controla como a largura e a altura de um elemento são calculadas.

Na classe content-box, a largura do elemento é 360px. A width é 300px, com o padding à esquerda e à direita totalizando 40px e a border à esquerda e à direita totalizando 20px, resultando em um total de 360px.
No border-box, a largura do elemento é 300px. O padding e a border estão incluídos na largura (width) especificada.

Valores de `box-sizing`

Existem principalmente dois valores para box-sizing: content-box e border-box, sendo content-box o valor padrão.

`content-box`

 1.content-box {
 2    box-sizing: content-box;
 3    width: 200px;
 4    padding: 20px;
 5    border: 10px solid black;
 6}
 7/*
 8260px = 200px(width) +
 920px(padding-left) + 20px(padding-right) +
1010px(border-left) + 10px(border-right)
11*/

Quando content-box é especificado, somente a largura e altura do conteúdo são definidas pela width e height. O padding e a border são adicionados para determinar o tamanho final. Em outras palavras, width e height referem-se apenas à área de conteúdo.

Neste exemplo, a width especificada é 200px, mas ao adicionar as larguras do padding e border à esquerda e à direita, a largura final real do elemento é 260px.

`border-box`

1.border-box {
2    width: 200px;
3    padding: 20px;
4    border: 10px solid black;
5    box-sizing: border-box;
6}

Quando border-box é especificado, a width e a height são calculadas incluindo o padding e a border. Em outras palavras, a width e a height especificadas tornam-se o tamanho total do conteúdo, padding e border.

Nesse caso, a width especificada é 200px, e como o padding e a border também estão incluídos, a largura final real do elemento permanece 200px. O padding e a border são ajustados dentro dele.

Resumo das diferenças de `box-sizing`

Propriedade	Método de Cálculo	Cálculo da Largura Real
`content-box` (padrão)	`largura` refere-se apenas ao conteúdo. `padding` e `bordas` são adicionados.	`width` + `padding` + `border`
`border-box`	`width` é tudo (inclui conteúdo, `padding`, `border`)	A `width` especificada é usada como está.

Vantagens do `box-sizing`

Usar border-box estabiliza o layout. Adicionar padding ou border não altera o tamanho especificado, tornando os cálculos simples.
É útil ao criar layouts flexíveis. Em designs responsivos ou layouts complexos, border-box é frequentemente usado para evitar variações de tamanho inesperadas.

Como aplicar `border-box` globalmente

1*,
2*::before,
3*::after {
4    box-sizing: border-box;
5}

Configurando o CSS dessa maneira, você pode aplicar border-box a todos os elementos para evitar mudanças inesperadas de tamanho.

Resumo

box-sizing controla se padding e border estão incluídos na width e na height de um elemento.
Usar border-box torna os cálculos de tamanho mais fáceis e é adequado para design responsivo.

Propriedade `visibility`

 1.visibility-visible {
 2    visibility: visible;
 3}
 4
 5.visibility-hidden {
 6    visibility: hidden;
 7}
 8
 9.visibility-collapse {
10    visibility: collapse;
11}

A propriedade visibility é usada para mostrar ou ocultar elementos, mas, diferentemente da propriedade display, ela afeta o layout mesmo que o elemento esteja oculto. Ela apenas oculta o elemento, mantendo sua posição e tamanho originais sem afetar o layout de outros elementos.

Sintaxe Básica

1element {
2    visibility: value;
3}

value: Um valor que especifica a visibilidade do elemento.

Tipos de valores

A propriedade visibility pode ser configurada com os seguintes valores:.

`visible`

Especificar visible exibirá o elemento. Este é o valor padrão.

`hidden`

Especificar hidden ocultará o elemento, mas o espaço do layout será reservado.

`collapse`

collapse é usado principalmente para linhas ou colunas de tabelas. O elemento se torna invisível e seu espaço também é ignorado. Quando aplicado a linhas ou colunas de tabelas, as linhas ou colunas ocultas são completamente removidas do layout.
No entanto, quando usado em elementos de bloco ou inline comuns, exceto elementos de tabela, ele se comporta como hidden e o espaço do layout é mantido.

`inherit`

Especificar inherit herdará o valor da propriedade visibility do elemento pai.

Diferenças entre `visibility` e `display`

Existem as seguintes diferenças entre visibility e display.

visibility: hidden oculta o elemento, mas mantém o seu espaço e layout.
display: none remove completamente o elemento do layout, permitindo que outros elementos ocupem esse espaço.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Propriedades CSS para exibição de código e citações Propriedades de CSS relacionadas ao fundo

Propriedades CSS relacionadas ao modelo de caixa

YouTube Video

HTML para Visualização

Relacionado ao Modelo de Caixa

Propriedades width e height

Valores que podem ser especificados

Especificando Valores Mínimos e Máximos

Propriedades margin e padding

Propriedade margin

Notação compacta:

Propriedade padding

Função:

Notação compacta:

Propriedade box-sizing

Valores de box-sizing

content-box

border-box

Resumo das diferenças de box-sizing

Vantagens do box-sizing

Como aplicar border-box globalmente

Resumo

Propriedade visibility

Sintaxe Básica

Tipos de valores

visible

hidden

collapse

inherit

Diferenças entre visibility e display

YouTube Video

Propriedades `width` e `height`

Propriedades `margin` e `padding`

Propriedade `margin`

Propriedade `padding`

Propriedade `box-sizing`

Valores de `box-sizing`

`content-box`

`border-box`

Resumo das diferenças de `box-sizing`

Vantagens do `box-sizing`

Como aplicar `border-box` globalmente

Propriedade `visibility`

`visible`

`hidden`

`collapse`

`inherit`

Diferenças entre `visibility` e `display`