Arquivos colapso de margens css - Web-Zoneware https://webzoneware.com/tag/colapso-de-margens-css/ Mais do que apenas uma academia web. Thu, 22 Oct 2026 18:26:41 +0000 pt-BR hourly 1 https://webzoneware.com/wp-content/uploads/icon-webzoneware-150x150.png Arquivos colapso de margens css - Web-Zoneware https://webzoneware.com/tag/colapso-de-margens-css/ 32 32 Margens e Margin Collapsing no CSS: Guia | Web Academy https://webzoneware.com/web-academy/curso-css/margens-margin-collapsing-css/ https://webzoneware.com/web-academy/curso-css/margens-margin-collapsing-css/#respond Wed, 21 Oct 2026 21:41:54 +0000 https://webzoneware.com/?p=29406 A propriedade margin representa a camada mais externa do Box Model — um campo de força totalmente invisível e transparente que estabelece o distanciamento entre um elemento e seus vizinhos na página. Embora pareça um conceito trivial de espaçamento, as margens escondem um dos comportamentos mais peculiares, desconcertantes e geradores de bugs da história da […]

O post Margens e Margin Collapsing no CSS: Guia | Web Academy apareceu primeiro em Web-Zoneware.

]]> A propriedade margin representa a camada mais externa do Box Model — um campo de força totalmente invisível e transparente que estabelece o distanciamento entre um elemento e seus vizinhos na página. Embora pareça um conceito trivial de espaçamento, as margens escondem um dos comportamentos mais peculiares, desconcertantes e geradores de bugs da história da web: o Margin Collapsing (Colapso de Margens Verticais). Nesta aula, entenderemos a mecânica exata pela qual margens se fundem, por que o espaçamento de um elemento filho pode “vazar” e deslocar o elemento pai inteiro, e como solucionar esse problema definitivamente utilizando a propriedade moderna display: flow-root.

1. A Anatomia da Margem no Box Model

Ao contrário do padding (que preenche o interior da caixa e recebe sua cor de fundo), a margem é sempre externa e transparente. Ela existe exclusivamente para empurrar caixas vizinhas.

CSS
margin-shorthands.css
CSS3 18 linhas 
/* Notação individual por lado */
.card {
    margin-top: 24px;
    margin-right: 16px;
    margin-bottom: 32px;
    margin-left: 16px;
}
 
/* Notação Resumida Horária (TRouBLe: Top, Right, Bottom, Left) */
.card-shorthand {
    margin: 24px 16px 32px 16px;
}
 
/* Notação com Propriedades Lógicas Modernas */
.card-logico {
    margin-block: 24px 32px;  /* Vertical: Top e Bottom */
    margin-inline: 16px;       /* Horizontal: Left e Right */
}

2. O Que É o Margin Collapsing (Colapso de Margens)?

Em elementos em bloco no fluxo normal do documento, quando duas margens verticais entram em contato físico direto, elas não se somam. Em vez de somar os valores, o motor de renderização do navegador as funde em uma única margem equivalente ao maior valor entre as duas.

Direção da Margem Sofre Colapso? Regra de Cálculo
Margens Verticais (Top e Bottom) Sim! A maior margem vence. Se houver valores negativos, eles são subtraídos do positivo.
Margens Horizontais (Left e Right) Nunca! Margens laterais sempre se somam normalmente (ex: 20px + 30px = 50px).
📖
Por que o W3C inventou o colapso de margens? O colapso foi criado para a tipografia editorial de textos longos. Se todos os parágrafos de um artigo possuírem margin-top: 1rem; margin-bottom: 1rem;, sem o colapso teríamos um vão duplo de 2rem entre parágrafos no meio do texto e apenas 1rem no início e no fim. O colapso garante que a distância entre quaisquer parágrafos consecutivos permaneça uniforme em exatos 1rem.

3. Os 3 Cenários Clássicos Onde o Colapso Ocorre

Cenário 1: Irmãos Adjacentes (Adjacent Siblings)

É o caso mais frequente: um elemento que possui margem inferior seguido imediatamente por um elemento que possui margem superior:

CSS
irmaos-colapso.css
CSS3 11 linhas 
h2 {
    margin-bottom: 30px; /* Margem inferior de 30px */
}
 
p {
    margin-top: 20px;    /* Margem superior de 20px */
}
 
/* O QUE ACONTECE NA TELA?
   As margens se encontram. Como 30px > 20px, a margem colapsa para 30px!
   A distância física real entre o h2 e o p será de 30px (e NÃO 50px). */

Cenário 2: Pai e Primeiro/Último Filho (O “Vazamento” de Margem)

Este é o cenário que mais gera desespero em desenvolvedores. Quando um elemento pai não possui borda nem preenchimento (padding) no topo, a margem superior do primeiro elemento filho toca diretamente a margem do pai.

O resultado: a margem do filho escapa para fora do pai e empurra o contêiner inteiro para baixo em relação ao topo da janela!

HTML & CSS
vazamento-margem.css
HTML5 3 linhas 
<header class="cabecalho-topo">
    <h1 class="titulo-site">Web-ZoneWare</h1>
</header>
CSS3 12 linhas 
.cabecalho-topo {
    background-color: #0284c7;
    /* Sem padding e sem border no topo */
}
 
.titulo-site {
    margin-top: 40px; /* O programador queria afastar o título DENTRO do cabeçalho */
}
 
/* RESULTADO DESASTROSO:
   O título NÃO se afasta dentro do cabeçalho azul!
   Em vez disso, surge um vão em branco de 40px ACIMA do cabeçalho azul inteiro! */

Cenário 3: Blocos Vazios

Se um elemento não tiver conteúdo, altura, padding ou borda, sua margin-top colapsará diretamente contra sua própria margin-bottom.

4. A Matemática de Colapso com Margens Negativas

Quando uma ou ambas as margens envolvidas no colapso forem negativas, o cálculo segue uma lógica matemática estrita:

Margens Envolvidas Exemplo Cálculo do Navegador Distância Resultante
Ambas Positivas +30px e +20px A maior prevalece: max(30, 20) 30px
Positiva + Negativa +40px e -15px Soma algébrica simples: 40 + (-15) 25px
Ambas Negativas -10px e -25px A mais negativa vence: min(-10, -25) -25px (puxa 25px para cima)

5. Como Resolver o Colapso de Margens Definitivamente

🚀
A Solução Moderna Definitiva: display: flow-root

No passado, os desenvolvedores aplicavam o hack overflow: hidden no elemento pai para conter o vazamento de margens. O problema do overflow: hidden é que ele corta acidentalmente sombras (box-shadow) e menus suspensos.

O CSS Display Module Level 3 criou a propriedade oficial display: flow-root. Ela cria um Block Formatting Context (BFC) limpo e isolado: as margens dos elementos filhos ficam 100% presas dentro do elemento pai, sem nenhum efeito colateral em sombras ou transbordamentos!

CSS
solucoes-colapso.css
CSS3 17 linhas 
/* Solução 1 (Moderna): display: flow-root no elemento pai */
.cabecalho-resolvido {
    background-color: #0284c7;
    display: flow-root; /* Previne instantaneamente o colapso de margens dos filhos! */
}
 
/* Solução 2: Adicionar um padding ou border mínimo no pai */
.cabecalho-com-padding {
    background-color: #0284c7;
    padding-top: 1px; /* A presença de 1px de padding quebra o contato das margens */
}
 
/* Solução 3: Usar Flexbox ou CSS Grid no pai */
.cabecalho-flex {
    background-color: #0284c7;
    display: flex; /* Margens de filhos dentro de Flexbox NUNCA colapsam! */
}

6. Onde o Colapso de Margens NUNCA Ocorre

Para evitar surpresas, decore os ambientes onde o algoritmo de colapso de margens é automaticamente desativado pelo navegador:

  • Dentro de contêineres display: flex (os flex items não colapsam margens).
  • Dentro de contêineres display: grid (os grid items não colapsam margens).
  • Elementos com position: absolute ou position: fixed.
  • Elementos flutuantes (float: left ou float: right).
  • Elementos em linha (display: inline não aceita margens verticais).
  • Entre elementos separados por preenchimento (padding) ou borda (border).

7. Laboratório Prático: Diagnosticando e Corrigindo o Vazamento de Margens

Neste laboratório completo, construiremos um banner com o erro clássico de vazamento de margem e sua correção imediata através de display: flow-root:

HTML
margin-collapse-lab.html
HTML5 23 linhas 
<div class="lab-wrapper">
    <h2 class="lab-title">Laboratório de Margin Collapsing</h2>
 
    <!-- Exemplo com Vazamento de Margem -->
    <div class="exemplo-box">
        <span class="badge badge-erro">Sem BFC (Margem Vaza)</span>
        <div class="container-pai com-vazamento">
            <div class="filho-margem">
                O h1 deste bloco tenta empurrar a si mesmo, mas empurra o pai para fora!
            </div>
        </div>
    </div>
 
    <!-- Exemplo com display: flow-root (Corrigido) -->
    <div class="exemplo-box">
        <span class="badge badge-sucesso">Com display: flow-root (Contido)</span>
        <div class="container-pai com-flow-root">
            <div class="filho-margem">
                A margem fica 100% contida dentro do contêiner pai perfeitamente.
            </div>
        </div>
    </div>
</div>
CSS
margin-collapse-lab.css
CSS3 87 linhas 
/* Reset e base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #0b0f19;
    color: #f8fafc;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}
 
.lab-wrapper {
    max-width: 640px;
    width: 100%;
}
 
.lab-title {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
    color: #38bdf8;
}
 
.exemplo-box {
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}
 
.badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 6px;
    margin-bottom: 1rem;
}
 
.badge-erro {
    background-color: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
}
 
.badge-sucesso {
    background-color: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.4);
}
 
/* O contêiner pai que sofrerá o teste */
.container-pai {
    background-color: #0f172a;
    border-radius: 8px;
    /* Sem padding e sem border propositalmente */
}
 
/* 1. Com Vazamento de Margem: o pai sofre colapso */
.com-vazamento {
    /* Comportamento padrão de bloco */
}
 
/* 2. Corrigido com a propriedade moderna */
.com-flow-root {
    display: flow-root; /* Isola o BFC e trava as margens internas */
}
 
.filho-margem {
    margin-top: 35px;    /* Margem agressiva no topo */
    margin-bottom: 35px; /* Margem agressiva na base */
    background-color: #0284c7;
    color: #ffffff;
    padding: 1rem;
    border-radius: 6px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
}
⚡ Abrir no Playground IDE →

8. Boas Práticas da Indústria para Margens

  • ✅ Adote a Regra da Margem Unidirecional (Single Direction Margin): Ao formatar elementos de texto (títulos, listas, parágrafos), utilize sempre margin-bottom e zere o margin-top. Manter todas as margens empurrando para baixo elimina conflitos de colapso e cria um ritmo vertical previsível.
  • ✅ Use display: flow-root em Vez de Hacks: Abandone o antigo overflow: hidden para conter margens que vazam. O display: flow-root é a solução semântica recomendada pelo W3C.
  • ❌ Nunca Use Margem para Afastar o Conteúdo da Borda do Pai: Se você quer que o texto fique longe da borda interna de um card, a propriedade correta é padding no pai, nunca margin no filho.

9. Ferramentas Relacionadas & Próximos Passos

Continue praticando o controle de espaçamentos no portal:

🚀
Próxima Lição: Na Lição 15: Padding & Espaçamento Interno no CSS, aprofundaremos as regras do colchão interno respirável, áreas de clique ampliadas para acessibilidade mobile e técnicas de proporção de aspecto (aspect ratio).

10. Referências Técnicas & Especificações Oficiais

O post Margens e Margin Collapsing no CSS: Guia | Web Academy apareceu primeiro em Web-Zoneware.

]]> https://webzoneware.com/web-academy/curso-css/margens-margin-collapsing-css/feed/ 0 O Box Model no CSS: Guia do Modelo de Caixa | Web Academy https://webzoneware.com/web-academy/curso-css/box-model-modelo-de-caixa/ https://webzoneware.com/web-academy/curso-css/box-model-modelo-de-caixa/#respond Wed, 21 Oct 2026 19:48:21 +0000 https://webzoneware.com/?p=29397 Bem-vindo ao Módulo 2: O Box Model, Espaçamento & Tipografia! No universo do CSS, existe uma lei física fundamental sobre a qual toda a web é construída: absolutamente tudo é uma caixa retangular. Independentemente de um botão parecer perfeitamente circular, uma imagem possuir fundo transparente ou um texto estar em formato itálico, o motor de […]

O post O Box Model no CSS: Guia do Modelo de Caixa | Web Academy apareceu primeiro em Web-Zoneware.

]]> Bem-vindo ao Módulo 2: O Box Model, Espaçamento & Tipografia! No universo do CSS, existe uma lei física fundamental sobre a qual toda a web é construída: absolutamente tudo é uma caixa retangular. Independentemente de um botão parecer perfeitamente circular, uma imagem possuir fundo transparente ou um texto estar em formato itálico, o motor de renderização do navegador enxerga e calcula cada nó HTML como uma série de quatro caixas concêntricas aninhadas. Compreender a anatomia do Box Model e a revolução da propriedade box-sizing: border-box é a chave mestre para criar layouts que nunca quebram ou estouram a tela.

1. A Anatomia das 4 Camadas Concêntricas

Toda caixa gerada no CSS é composta por quatro camadas geométricas sobrepostas, partindo do centro até a periferia:

Camada Nome Técnico O Que Representa? Recebe a Cor de Fundo? Aceita Valores Negativos?
1. Conteúdo Content Box A área onde vivem textos, ícones, imagens ou nós filhos. Delimitada por width e height. Sim Não
2. Preenchimento Padding Box O espaço respirável interno entre o conteúdo e a borda. Sim (herda background) Não (padding negativo não existe)
3. Borda Border Box A moldura visível que envolve o padding e o conteúdo. Visível se houver estilo de borda Não
4. Margem Margin Box O campo de força externo que empurra os elementos vizinhos para longe. Nunca (é sempre transparente) Sim (puxa elementos)
CSS
box-model-anatomia.css
CSS3 17 linhas 
.meu-card {
    /* 1. Content: Dimensão da área de conteúdo */
    width: 320px;
    height: auto;
 
    /* 2. Padding: Espaçamento interno respirável */
    padding: 24px;
 
    /* 3. Border: Moldura delimitadora */
    border: 2px solid #334155;
 
    /* 4. Margin: Distância em relação aos elementos vizinhos */
    margin: 32px auto;
 
    /* Cor de fundo: preenche o Content e o Padding, parando na Border! */
    background-color: #1e293b;
}

2. O Grande Duelo: content-box vs. border-box

A forma como o navegador calcula a largura final real de um elemento na tela depende do modelo de dimensionamento definido pela propriedade box-sizing.

O Padrão Histórico do W3C: content-box

Por padrão de fábrica, todos os navegadores utilizam box-sizing: content-box. Neste modelo matemático arcaico, a propriedade width define apenas a largura da área de conteúdo. Qualquer padding ou borda declarado é adicionado por fora:

⚠️
A Fórmula da Quebra de Layout (content-box):

Largura Total na Tela = width + padding-left + padding-right + border-left + border-right

O desastre prático: Se você declarar uma caixa com width: 100% e adicionar padding: 20px, a largura real na tela será de 100% + 40px! O elemento ultrapassará a tela do visitante, gerando a temida e inaceitável barra de rolagem horizontal (overflow).

O Padrão Moderno da Engenharia: border-box

Com box-sizing: border-box, a propriedade width define a largura total final da caixa visível na tela. O navegador absorve o padding e a borda para dentro do espaço especificado, encolhendo o conteúdo se necessário:

💡
A Fórmula da Paz Mental (border-box):

Largura Total na Tela = width declarado

Se você declarar width: 300px; padding: 25px; border: 5px solid red;, a caixa medirá exatos 300px na tela. O conteúdo interno se ajustará automaticamente em 240px (300 – 50 de padding – 10 de borda). O layout nunca quebra!

3. O Reset Universal Definitivo do Box-Sizing

Como o padrão original dos navegadores é o instável content-box, 100% dos projetos profissionais modernos iniciam suas folhas de estilo aplicando o reset universal de border-box:

CSS
reset-border-box.css
CSS3 6 linhas 
/* Reset Universal Recomendado: Inclui elementos e pseudo-elementos */
*, 
*::before, 
*::after {
    box-sizing: border-box;
}

A inclusão dos pseudo-elementos *::before e *::after é indispensável. Sem eles, qualquer elemento decorativo gerado via CSS herdará o comportamento antigo do navegador.

4. O Fenômeno do Colapso de Margens Verticais (Margin Collapse)

Um dos comportamentos mais peculiares da especificação do CSS é o Colapso de Margens.

Quando duas margens verticais (superior e inferior) de elementos em bloco se encontram no fluxo normal da página, elas não se somam. Em vez de se adicionarem, elas se fundem em uma única margem cujo tamanho é igual à maior margem entre as duas:

CSS
colapso-margens.css
CSS3 11 linhas 
h2 {
    margin-bottom: 30px; /* Margem inferior de 30px */
}
 
p {
    margin-top: 20px;    /* Margem superior de 20px */
}
 
/* RESULTADO REAL NA TELA:
   A distância física entre o h2 e o p NÃO será de 50px (30 + 20).
   As margens colapsam e a distância real será de EXATOS 30px (a maior)! */
📌
Regra Fundamental: Margens horizontais (margin-left e margin-right) NUNCA colapsam. Além disso, elementos com display: flex, display: grid ou position: absolute não sofrem colapso de margens com seus filhos ou vizinhos.

5. Margens Negativas vs. Padding Negativo

O CSS permite aplicar valores numéricos negativos em margens (como margin-top: -24px). Uma margem negativa não empurra o elemento para longe: ela puxa o elemento na direção oposta, permitindo criar efeitos de cartões sobrepostos e banners de destaque.

Por outro lado, padding negativo NÃO existe no CSS. Se você tentar declarar padding: -10px;, a declaração será imediatamente rejeitada pelo motor do navegador e tratada como 0.

6. Como Inspecionar o Box Model no DevTools do Navegador

Ao pressionar F12 e abrir o painel de desenvolvedor do Chrome, Edge ou Firefox, acesse a aba Elements > Computed. O navegador exibirá um diagrama retangular concêntrico com o código de cores oficial da indústria:

  • 🟦 Azul: Content Box (Área de conteúdo com texto ou imagem).
  • 🟩 Verde: Padding Box (Espaçamento interno).
  • 🟨 Amarelo / Mostarda: Border Box (Espessura da moldura).
  • 🟧 Laranja / Pêssego: Margin Box (Espaçamento externo de afastamento).

Passar o mouse sobre cada camada colorida no DevTools destaca fisicamente a região correspondente na janela do site, permitindo identificar instantaneamente de onde vêm espaços fantasmas ou estouros de layout.

7. Laboratório Prático: Card de Produto com Margem Negativa e Border-Box

Neste laboratório prático, construiremos um card de produto de e-commerce aplicando o modelo de caixa moderno, padding respirável e uma sobreposição elegante através de margem negativa:

HTML
product-card.html
HTML5 22 linhas 
<div class="card-produto">
    <!-- Imagem de destaque com margem negativa que sangra para fora do padding -->
    <div class="card-imagem-wrapper">
        <span class="badge-status">Lançamento</span>
    </div>
 
    <div class="card-conteudo">
        <span class="card-categoria">Hardware & Periféricos</span>
        <h3 class="card-nome">Teclado Mecânico RGB Pro</h3>
        <p class="card-desc">
            Switches ópticos lineares, keycaps double-shot PBT e estrutura em alumínio aeroespacial com iluminação programável.
        </p>
 
        <div class="card-rodape">
            <div class="card-preco">
                <span class="preco-antigo">R$ 499</span>
                <span class="preco-atual">R$ 389</span>
            </div>
            <button class="btn-comprar">Adicionar</button>
        </div>
    </div>
</div>
CSS
product-card.css
CSS3 117 linhas 
/* 1. Reset Universal Obrigatório */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #0b0f19;
    color: #f8fafc;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
}
 
/* 2. O Card Principal com Modelo de Caixa Perfeito */
.card-produto {
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 14px;
    padding: 1.5rem; /* Padding interno uniforme */
    max-width: 360px;
    width: 100%;    /* Graças ao border-box, nunca ultrapassará 360px! */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}
 
/* 3. Efeito Sangrado com Margens Negativas */
.card-imagem-wrapper {
    /* As margens negativas compensam exatamente o padding de 1.5rem do card pai! */
    margin-top: -1.5rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-bottom: 1.25rem;
    
    height: 180px;
    background: linear-gradient(135deg, #0284c7, #38bdf8);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 1rem;
}
 
.badge-status {
    background-color: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(8px);
    color: #38bdf8;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid rgba(56, 189, 248, 0.3);
}
 
.card-categoria {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #38bdf8;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.35rem;
}
 
.card-nome {
    font-size: 1.25rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
}
 
.card-desc {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #94a3b8;
    margin-bottom: 1.5rem;
}
 
.card-rodape {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #334155;
    padding-top: 1rem;
}
 
.preco-antigo {
    font-size: 0.8rem;
    color: #64748b;
    text-decoration: line-through;
    display: block;
}
 
.preco-atual {
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
}
 
.btn-comprar {
    background-color: #0284c7;
    color: #ffffff;
    border: none;
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
 
.btn-comprar:hover {
    background-color: #0369a1;
    transform: translateY(-2px);
}
⚡ Abrir no Playground IDE →

8. Boas Práticas & Erros Comuns de Iniciantes

  • ❌ Tentar criar espaço com parágrafos vazios ou <br><br>: Nunca use tags HTML para controlar espaçamentos geométricos. Espaçamento é responsabilidade estrita do CSS através de margin, padding ou gap.
  • ❌ Usar Margin em vez de Padding em Caixas com Fundo: Se você tiver um card com fundo escuro e aplicar margem interna, a cor de fundo não cobrirá essa margem (que é transparente), expondo o fundo da página. Para afastar o texto da borda do card, use sempre padding.
  • ✅ Adote o Reset Universal de Box-Sizing em 100% dos Projetos: Não confie no content-box padrão. Declare sempre box-sizing: border-box no seletor universal logo na primeira linha do seu arquivo de estilo.

9. Ferramentas Relacionadas & Próximos Passos

Explore e pratique o dimensionamento de caixas no portal Web-ZoneWare:

🚀
Próxima Lição: Na Lição 12: Bordas no CSS e Border Radius, avançaremos na camada delimitadora da caixa explorando espessuras, estilos de traço, contornos (outline) e a geometria de cantos arredondados elípticos.

10. Referências Técnicas & Especificações Oficiais

O post O Box Model no CSS: Guia do Modelo de Caixa | Web Academy apareceu primeiro em Web-Zoneware.

]]> https://webzoneware.com/web-academy/curso-css/box-model-modelo-de-caixa/feed/ 0