Modelo de caixa, fluxo e overflow

Contar as áreas certas

Em content-box, width define a área de conteúdo; padding e borda aumentam a border box. Em border-box, essas duas áreas cabem na largura declarada, salvo o limite de conteúdo não negativo. No exemplo, 240 menos 32 de padding e 4 de borda dá 204px de conteúdo.

A margem de 12px fica fora da border box. Regista a dimensão procurada antes da conta: comparar width com uma medição que inclui margens produz uma conclusão errada mesmo com aritmética correta.

A largura também tem condições

Width não se aplica a um inline não substituído em fluxo normal da mesma forma que a um bloco. Um span pode conservar a largura do conteúdo apesar de width: 180px vencer a cascata. Inline-block permite uma caixa externa inline com largura aplicável.

Não extrapoles este exemplo para imagens substituídas, itens flex ou grid: o contexto muda as regras. Min-width e max-width também podem limitar a dimensão; os exercícios aritméticos simples excluem essas restrições explicitamente.

O limite de conteúdo zero

Border-box não torna possível conteúdo com largura negativa. Se width for 20px, padding horizontal totalizar 30px e as bordas totalizarem 4px, o conteúdo fica em zero e a border box chega a 34px. Não se reduzem automaticamente padding e bordas para satisfazer os 20px.

Esta situação importa em cartões estreitos e componentes reutilizados: um modelo de caixa consistente ajuda, mas não substitui a revisão das restrições geométricas e do espaço disponível.

Margens que partilham o intervalo

No fluxo block horizontal-tb, margens verticais de blocos adjacentes podem colapsar. Para duas margens positivas de 16px e 24px, o intervalo colapsado é 24px, não 40px. Num grupo com valores positivos e negativos, combina-se a maior positiva com a mais negativa: 18, 10 e -6 dão 12px.

Estas contas pressupõem um grupo realmente colapsável. Flex, grid, clearance, separadores e relações entre pai e filho exigem examinar o contexto antes de escolher a fórmula.

Conter um float sem recortar

Uma imagem float pode ultrapassar a altura que um contentor comum obtém do conteúdo em fluxo. Display: flow-root cria um contexto de formatação de blocos e permite conter o float no cálculo da altura automática. Usar overflow: hidden também pode criar esse contexto, mas junta-lhe recorte e comportamento de scroll, que podem esconder sombras, menus ou ações.

Se o objetivo é apenas contenção, flow-root exprime essa intenção sem introduzir recorte; continua a ser necessário avaliar a disposição do conteúdo.

Espaço reservado e referência de posição

Relative mantém o espaço do elemento no fluxo, embora top possa deslocar a sua representação. Absolute retira a caixa do fluxo normal. No exemplo, position: relative no cartão estabelece a referência para o badge absoluto sem retirar o cartão do fluxo.

Não generalizes que absolute usa sempre o viewport: ancestrais posicionados e outros mecanismos, como transforms, podem estabelecer um bloco de contenção. Os casos deste bloco excluem estes mecanismos adicionais quando pedem uma previsão exata.

Recorte, scroll e sticky

Hidden recorta conteúdo, mas pode permitir scroll por código ou por foco. Clip recorta sem criar um scroll container nem permitir esse scroll por código. Auto pode oferecer scroll quando o conteúdo excede a área limitada.

Sticky usa o ancestral relevante de scroll e os limites do bloco de contenção, exigindo um inset não auto no eixo pretendido. No painel do exemplo, top: 0 não converte o cabeçalho em fixed do viewport. Observa qual caixa se desloca e qual caixa limita o cabeçalho antes de alterar offsets.

Armadilhas comuns

Somar uma margem à border box; supor que border-box comprime padding; usar !important para tornar width aplicável a inline; contar margens colapsadas como uma soma; usar hidden só para conter floats; tratar sticky como fixed; esperar que offsets relativos movam os irmãos.