Czy istnieje sposób na całkowite wyłączenie zwijania marginesów? Jedyne rozwiązania, które znalazłem (pod nazwą „unollapsing”) wymagają użycia obramowania 1px lub wypełnienia 1px. Uważam to za niedopuszczalne: obcy piksel komplikuje obliczenia bez uzasadnionego powodu. Czy istnieje bardziej rozsądny sposób na wyłączenie tego zwijania marginesów?

Istnieją dwa główne rodzaje zwinięcia marginesów:

• Zwijające się marginesy między sąsiadującymi elementami
• Zwijane marginesy między elementami nadrzędnymi i podrzędnymi

Użycie wypełnienia lub ramki zapobiegnie zawaleniu się tylko w tym drugim przypadku. Ponadto każda wartość overflowinna niż wartość domyślna ( visible) zastosowana do elementu nadrzędnego zapobiegnie zwinięciu. Tak więc, zarówno overflow: autoi overflow: hiddenbędzie miał ten sam efekt. Być może jedyną różnicą podczas używania hiddenjest niezamierzona konsekwencja ukrywania treści, jeśli rodzic ma stałą wysokość.

Inne właściwości, które po zastosowaniu do elementu nadrzędnego mogą pomóc naprawić to zachowanie, to:

• float: left / right
• position: absolute
• display: inline-block / flex

Możesz je przetestować tutaj: http://jsfiddle.net/XB9wX/1/ .

Powinienem dodać, że jak zwykle wyjątek stanowi Internet Explorer. Mówiąc dokładniej, marginesy w IE 7 nie ulegają zwinięciu, gdy dla elementu nadrzędnego określony jest jakiś układ, na przykład width.

Źródła: artykuł Sitepoint Zwijające się marginesy

Możesz również użyć do tego starej dobrej mikro-poprawki.

#container:before, #container:after{
    content: ' ';
    display: table;
}

Zobacz zaktualizowane skrzypce: http://jsfiddle.net/XB9wX/97/

Jedną zgrabną sztuczką, aby wyłączyć zwijanie marginesów, która nie ma wpływu wizualnego, o ile wiem, jest ustawienie dopełnienia elementu nadrzędnego na 0.05px:

.parentClass {
    padding: 0.05px;
}

Wypełnienie nie jest już równe 0, więc zapadanie się już nie występuje, ale jednocześnie wypełnienie jest wystarczająco małe, aby wizualnie zaokrąglić w dół do 0.

Jeśli pożądane jest inne wypełnienie, zastosuj wypełnienie tylko w „kierunku”, w którym na przykład nie jest wymagane zawijanie marginesu padding-top: 0.05px;.

Przykład roboczy:

.noCollapse {
  padding: 0.05px;
}

.parent {
  background-color: red;
  width: 150px;
}

.children {
  margin-top: 50px;

  background-color: lime;      
  width: 100px;
  height: 100px;
}

<h3>Border collapsing</h3>
<div class="parent">
  <div class="children">
  </div>
</div>

<h3>No border collapsing</h3>
<div class="parent noCollapse">
  <div class="children">
  </div>
</div>

Edycja: zmieniono wartość z 0.1na 0.05. Jak Chris Morgan wspomniał w komentarzu poniżej, i z tego małego testu wydaje się, że Firefox rzeczywiście bierze 0.1pxpod uwagę dopełnienie. Chociaż 0.05pxwydaje się , że załatwia sprawę.

overflow:hidden zapobiega załamywaniu się marginesów, ale nie jest wolny od skutków ubocznych - mianowicie ... ukrywa przepełnienie.

Oprócz tego i tego, o czym wspomniałeś, musisz po prostu nauczyć się z tym żyć i uczyć się na ten dzień, kiedy są one naprawdę przydatne (przychodzi co 3 do 5 lat).

W rzeczywistości istnieje taki, który działa bezbłędnie:

wyświetlacz: flex; kierunek zgięcia: kolumna;

tak długo, jak możesz żyć z obsługą tylko IE10 i nowszych wersji

.container {
  display: flex;
  flex-direction: column;
    background: #ddd;
    width: 15em;
}

.square {
    margin: 15px;
    height: 3em;
    background: yellow;
}

<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>
<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

Każda przeglądarka internetowa powinna obsługiwać właściwości -webkit-margin-collapse . Istnieją również właściwości podrzędne, aby ustawić go tylko dla górnego lub dolnego marginesu. Możesz nadać mu wartość zwinięcia (domyślnie), odrzucić (ustawia margines na 0, jeśli istnieje sąsiedni margines) i oddzielić (zapobiega zwinięciu marginesu).

Testowałem, że działa to w 2014 r. Wersjach Chrome i Safari. Niestety nie sądzę, że będzie to obsługiwane w IE, ponieważ nie jest oparte na webkit.

Zapoznaj się z dokumentacją CSS Safari firmy Apple, aby uzyskać pełne wyjaśnienie.

Jeśli sprawdzisz stronę z rozszerzeniami CSS Mozilli, podają one te właściwości jako zastrzeżone i zalecają ich nie używać. Wynika to z faktu, że prawdopodobnie nie zamierzają w najbliższym czasie przejść do standardowego CSS i będą obsługiwane tylko przeglądarki oparte na pakiecie internetowym.

Wiem, że jest to bardzo stary post, ale chciałem tylko powiedzieć, że użycie Flexboksa na elemencie nadrzędnym wyłączałoby zwijanie marginesów dla jego elementów potomnych.

Miałem podobny problem z załamaniem się marginesu, ponieważ rodzic positionustawił na krewnego. Oto lista poleceń, których można użyć do wyłączenia zwijania marginesów.

TU JEST PLAC ZABAW DO TESTOWANIA

Wystarczy spróbować przypisać dowolną parent-fix*klasę do div.containerelementu lub dowolnej klasy children-fix*do div.margin. Wybierz ten, który najlepiej odpowiada Twoim potrzebom.

Kiedy

• Zwijanie marginesów jest wyłączone , div.absolutea czerwone tło zostanie umieszczone u góry strony.
• margines jest zwinięty div.absolute zostanie ustawiony na tej samej współrzędnej Y codiv.margin

html, body { margin: 0; padding: 0; }

.container {
  width: 100%;
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  height: 100px;
  border: 5px solid #F00;
  background-color: rgba(255, 0, 0, 0.5);
}

.margin {
  width: 100%;
  height: 20px;
  background-color: #444;
  margin-top: 50px;
  color: #FFF;
}

/* Here are some examples on how to disable margin 
   collapsing from within parent (.container) */
.parent-fix1 { padding-top: 1px; }
.parent-fix2 { border: 1px solid rgba(0,0,0, 0);}
.parent-fix3 { overflow: auto;}
.parent-fix4 { float: left;}
.parent-fix5 { display: inline-block; }
.parent-fix6 { position: absolute; }
.parent-fix7 { display: flex; }
.parent-fix8 { -webkit-margin-collapse: separate; }
.parent-fix9:before {  content: ' '; display: table; }

/* Here are some examples on how to disable margin 
   collapsing from within children (.margin) */
.children-fix1 { float: left; }
.children-fix2 { display: inline-block; }

<div class="container parent-fix1">
  <div class="margin children-fix">margin</div>
  <div class="absolute"></div>
</div>

Oto jsFiddle z przykładem, który możesz edytować

W nowszej przeglądarce (z wyjątkiem IE11) można zastosować proste rozwiązanie zapobiegające zwijaniu marginesów rodzic-dziecko display: flow-root. Jednak nadal potrzebujesz innych technik, aby zapobiec zapadnięciu się sąsiedniego elementu.

DEMO (wcześniej)

.parent {
  background-color: grey;
}

.child {
  height: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  background-color: blue;
}

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

DEMO (po)

.parent {
  display: flow-root;
  background-color: grey;
}

.child {
  height: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  background-color: blue;
}

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

Dla twojej informacji możesz użyć siatki, ale z efektami ubocznymi :)

.parent {
  display: grid
}