Movatterモバイル変換


[0]ホーム

URL:


  1. Tecnologia Web para desenvolvedores
  2. CSS
  3. Guides
  4. CSS Box Model
  5. Dominando margin collapsing

Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.

View in EnglishAlways switch to English

Dominando margin collapsing

As margenssuperior einferior dos blocos às vezes são combinadas(colapsadas/reduzidas) para uma única margem cujo o tamanho é a maior das margens (se os elementos tiverem a mesma margem, uma delas não será somada), combinado a ele, um comportamento conhecido comomargin collapsing. Note que as margens deelementos flutuantes eposicionados de forma absoluta nunca colapsam.

Margin collapsing ocorre em três casos básicos:

Irmãos adjacentes

As margens de irmãos adjacentes são colapsadas (execeto quando o último irmão precisar serlimpado devido ao uso de floats em elementos anteriores ). Por exemplo:

html
<p>A margem inferior deste parágrafo é colapsada...</p><p>... com margem superior deste parágrafo.</p>
Pai e primeiro/último filho

Se não houver border, padding, parte inline,contexto de formatação de bloco criado oulivre para separar omargin-top de um bloco domargin-top do seu primeiro bloco filho, ou nenhum border, padding, conteúdo inline,height,min-height, oumax-height para separar omargin-bottom de um bloco domargin-bottom do seu último filho, então essas margens colapsam. A margem colapsada acaba fora do pai.

Blocos vázios

Se não houver border, padding, conteúdo inline,height, oumin-height para separar um blocomargin-top de suamargin-bottom, então as margens superior e inferior são colapsadas.

Algumas coisas podem ser observadas:

  • Margin collapsing mais complexo (de mais de duas margens) ocorrem quando esses casos são combinados.
  • Essas regras se aplicam até mesmo a margens que são zero, portanto a margem e um primeiro/último filho termina fora de seu pai(de acordo com as regras acima) sendo a margem do pai zero ou não.
  • Quando margens negativas são envolvidas, o tamanho da margem colapsada é a soma da maior margem positiva e da menor margem negativa(a mais negativa).
  • Se ambos são negativos, o valor negativo maior será usado. Essa definição se aplica a elementos adjacentes e a elementos aninhados.

Margens deelementos flutuantes eposicionados de forma absoluta nunca colapsam.

Veja Também

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp