diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:49:58 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:49:58 +0100 |
commit | 68fc8e96a9629e73469ed457abd955e548ec670c (patch) | |
tree | 8529ab9fe63d011f23c7f22ab5a4a1c5563fcaa4 /files/pt-br/web/css/css_box_model/mastering_margin_collapsing | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-68fc8e96a9629e73469ed457abd955e548ec670c.tar.gz translated-content-68fc8e96a9629e73469ed457abd955e548ec670c.tar.bz2 translated-content-68fc8e96a9629e73469ed457abd955e548ec670c.zip |
unslug pt-br: move
Diffstat (limited to 'files/pt-br/web/css/css_box_model/mastering_margin_collapsing')
-rw-r--r-- | files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..cb658d4131 --- /dev/null +++ b/files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -0,0 +1,74 @@ +--- +title: Dominando margin collapsing +slug: Web/CSS/CSS_Box_Model/margin_collapsing +tags: + - CSS + - CSS Box Model + - Guía + - Intermediario(2) + - Referencia +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +<div dir="ltr">{{CSSRef}}</div> + +<div dir="ltr">As margens <a href="/pt-BR/docs/Web/CSS/margin-top">superior</a> e <a href="/en-US/docs/Web/CSS/margin-bottom">inferior</a> 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 como <strong>margin collapsing</strong>. Note que as margens de<a href="/pt-BR/docs/Web/CSS/float"> elementos flutuantes</a> e <a href="/pt-BR/docs/Web/CSS/position#Absolute_positioning">posicionados de forma absoluta</a> nunca colapsam.</div> + +<div dir="ltr"> </div> + +<p dir="ltr">Margin collapsing ocorre em três casos básicos:</p> + +<dl> + <dt dir="ltr">Irmãos adjacentes</dt> + <dd dir="ltr">As margens de irmãos adjacentes são colapsadas (execeto quando o último irmão precisar ser <a href="/en-US/docs/Web/CSS/clear">limpado</a> devido ao uso de floats em elementos anteriores ). Por exemplo:</dd> + <dd> + <pre class="brush: html"> <p>A margem inferior deste parágrafo é colapsada...</p> + <p>... com margem superior deste parágrafo.</p> +</pre> + </dd> + <dt dir="ltr">Pai e primeiro/último filho</dt> + <dd dir="ltr">Se não houver border, padding, parte inline, <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">contexto de formatação de bloco</a> criado ou <a href="/en-US/docs/Web/CSS/clear">livre</a> para separar o {{cssxref("margin-top")}} de um bloco do {{cssxref("margin-top")}} do seu primeiro bloco filho, ou nenhum border, padding, conteúdo inline, {{cssxref("height")}}, {{cssxref("min-height")}}, ou {{cssxref("max-height")}} para separar o {{cssxref("margin-bottom")}} de um bloco do {{cssxref("margin-bottom")}} do seu último filho, então essas margens colapsam. A margem colapsada acaba fora do pai.</dd> + <dd dir="ltr"> </dd> +</dl> + +<dl> + <dt dir="ltr">Blocos vázios</dt> + <dd dir="ltr">Se não houver border, padding, conteúdo inline, {{cssxref("height")}}, ou {{cssxref("min-height")}} para separar um bloco {{cssxref("margin-top")}} de sua {{cssxref("margin-bottom")}}, então as margens superior e inferior são colapsadas.</dd> + <dd dir="ltr"> </dd> +</dl> + +<p dir="ltr">Algumas coisas podem ser observadas:</p> + +<ul dir="ltr"> + <li>Margin collapsing mais complexo (de mais de duas margens) ocorrem quando esses casos são combinados.</li> + <li>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.</li> + <li>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).</li> + <li>Se ambos são negativos, o valor negativo maior será usado. Essa definição se aplica a elementos adjacentes e a elementos aninhados. </li> +</ul> + +<p dir="ltr">Margens de <a href="/pt-BR/docs/Web/CSS/float">elementos flutuantes</a> e <a href="/pt-BR/docs/Web/CSS/position#Absolute_positioning">posicionados de forma absoluta</a> nunca colapsam.</p> + +<h2 dir="ltr" id="Especificações">Especificações</h2> + +<table class="standard-table" dir="ltr"> + <thead> + <tr> + <th scope="col">Espeficicações</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 dir="ltr" id="Veja_Também">Veja Também</h2> + +<ul> + <li dir="ltr"><a href="/en-US/docs/Web/CSS/CSS_Reference">CSS Reference</a></li> + <li dir="ltr">{{css_key_concepts}}</li> +</ul> |