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?
202
margin-bottom
ale pozostawmargin-top
jako 0.Odpowiedzi:
Istnieją dwa główne rodzaje zwinięcia marginesów:
Użycie wypełnienia lub ramki zapobiegnie zawaleniu się tylko w tym drugim przypadku. Ponadto każda wartość
overflow
inna niż wartość domyślna (visible
) zastosowana do elementu nadrzędnego zapobiegnie zwinięciu. Tak więc, zarównooverflow: auto
ioverflow: hidden
będzie miał ten sam efekt. Być może jedyną różnicą podczas używaniahidden
jest 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
źródło
overflow: auto
może to powodować wyświetlanie pasków przewijania w elemencie nadrzędnym, zamiast przepełnienia treści zgodnie z przepisemoverflow: visible
.flex
inna niż domyślna spowoduje również wyłączenieMożesz również użyć do tego starej dobrej mikro-poprawki.
Zobacz zaktualizowane skrzypce: http://jsfiddle.net/XB9wX/97/
źródło
:before
i:after
elementami. Mam teraz dodało ten przepis do mojego arkusza stylów:div:before, div:after{content: ' '; display: table;}
. Fantastyczny. Nagle rzeczy zaczynają się zachowywać zgodnie z oczekiwaniami.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
: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:
Edycja: zmieniono wartość z
0.1
na0.05
. Jak Chris Morgan wspomniał w komentarzu poniżej, i z tego małego testu wydaje się, że Firefox rzeczywiście bierze0.1px
pod uwagę dopełnienie. Chociaż0.05px
wydaje się , że załatwia sprawę.źródło
*{padding-top:0.1px}
. Czy jesteśmy pewni, że działa we wszystkich przeglądarkach?0.05px
wydaje się nadal konkretnym wyborem, a nie przypadkowym numerem podstępnym przeglądarki, wolałbym0.01px
.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).
źródło
overflow: auto
dobrze jest użyć, aby zapobiec ukrytemu przepełnieniu i nadal zapobiegać zawaleniu się marginesów.overflow:auto;
że mój obszar zawartości zyskał pasek przewijania na niektórych stronach.W rzeczywistości istnieje taki, który działa bezbłędnie:
wyświetlacz: flex; kierunek zgięcia: kolumna;
źródło
<div>
w.container
, w przeciwnym razie.container
będzie kontrolować model pudełkowy jego dzieci. Na przykład elementy wbudowane staną się elementami blokowymi o pełnej szerokości; jeśli mają marginesy, zostaną one również zwinięte.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.
źródło
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.
źródło
Miałem podobny problem z załamaniem się marginesu, ponieważ rodzic
position
ustawił 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ę dodiv.container
elementu lub dowolnej klasychildren-fix*
dodiv.margin
. Wybierz ten, który najlepiej odpowiada Twoim potrzebom.Kiedy
div.absolute
a czerwone tło zostanie umieszczone u góry strony.div.absolute
zostanie ustawiony na tej samej współrzędnej Y codiv.margin
Oto jsFiddle z przykładem, który możesz edytować
źródło
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)
DEMO (po)
źródło
Dla twojej informacji możesz użyć siatki, ale z efektami ubocznymi :)
źródło