Jak wyłączyć zwijanie marginesu?
Czy jest sposób na całkowite wyłączenie margin-collapsing? Jedyne rozwiązania, które znalazłem (pod nazwą "uncollapsing") wymagają użycia obramowania 1px lub paddingu 1px. Uważam to za niedopuszczalne: zewnętrzny piksel komplikuje obliczenia bez powodu. Czy istnieje bardziej rozsądny sposób na wyłączenie tego marginesu?
10 answers
Istnieją dwa główne typy załamania marginesu:
- zwijanie marginesów między sąsiadującymi elementami
- zwijanie marginesów między elementami nadrzędnymi i podrzędnymi
Użycie wypełnienia lub obramowania zapobiegnie zapadnięciu się tylko w tym drugim przypadku. Ponadto każda wartość overflow
inna od domyślnej (visible
) zastosowana do rodzica zapobiegnie zwinięciu. Tak więc zarówno overflow: auto
, jak i overflow: hidden
będą miały ten sam efekt. Być może jedyną różnicą przy użyciu hidden
jest niezamierzona konsekwencja ukrywania zawartości, jeśli rodzic ma stałą wysokość.
Inne właściwości, które po zastosowaniu do rodzica mogą pomóc naprawić to zachowanie to:
float: left / right
position: absolute
display: inline-block / flex
Możesz przetestować je wszystkie tutaj: http://jsfiddle.net/XB9wX/1/.
Dodam, że jak zwykle wyjątek stanowi Internet Explorer. Dokładniej, w IE 7 marginesy nie zwijają się, gdy określony jest jakiś układ dla rodzica element, np.width
.
Źródła: artykuł Sitepoint zwijanie marginesów
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-01-23 17:08:46
Jedną z ciekawych sztuczek, aby wyłączyć zwijanie marginesów, które nie ma żadnego wpływu wizualnego, o ile wiem, jest ustawienie padding rodzica na 0.05px
:
.parentClass {
padding: 0.05px;
}
Padding nie jest już 0, więc zapadanie się nie będzie już miało miejsca, ale jednocześnie padding jest na tyle mały, że wizualnie zaokrągly się do 0.
Jeśli pożądane jest inne wypełnienie, zastosuj wypełnienie tylko do "kierunku", w którym załamanie się marginesu nie jest pożądane, na przykład padding-top: 0.05px;
.
Praca przykład:
.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>
Edit: zmieniono wartość z 0.1
na 0.05
. Jak wspomniał Chris Morgan w komentarzu poniżej, i z tego małego testu, wydaje się, że rzeczywiście Firefox bierze pod uwagę 0.1px
padding. Ale wydaje się, że to działa.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-19 15:18:01
Możesz również użyć starego dobrego Micro clearfix do tego celu.
#container::before, #container::after{
content: ' ';
display: table;
}
Zobacz zaktualizowaną wersję: http://jsfiddle.net/XB9wX/97/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-11-16 15:02:02
overflow:hidden
zapobiega zapadaniu 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 się tylko nauczyć żyć z tym i uczyć się na ten dzień, kiedy są rzeczywiście przydatne (przychodzi co 3 do 5 lat).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-01 00:20:40
Właściwie, jest taki, który działa bezbłędnie:
Wyświetlacz: flex; flex-direction: column;
tak długo, jak można żyć z obsługą tylko IE10 i up
.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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-17 13:01:09
Każda przeglądarka oparta na webkit powinna obsługiwać właściwości -webkit-margin-collapse
. Istnieją również podprogramy, aby ustawić go tylko dla górnego lub dolnego marginesu. Można mu nadać wartości collapse (domyślne), discard (ustawia margines na 0, jeśli istnieje sąsiedni margines) i separate (zapobiega zwinięciu marginesu).
Przetestowałem, że działa to na wersjach Chrome i Safari z 2014 roku. Niestety, nie wydaje mi się, aby to było obsługiwane w IE, ponieważ nie jest oparte na webkit.
Czytaj Apple ' s Safari CSS Reference dla pełnego wyjaśnienia.
Jeśli zaznaczysz stronę rozszerzeń CSS Webkit Mozilli, zaznaczą te właściwości jako zastrzeżone i nie zalecają ich używania. Dzieje się tak, ponieważ prawdopodobnie nie wejdą do standardowego CSS w najbliższym czasie i tylko przeglądarki oparte na webkit będą je obsługiwać.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-05-30 15:22:55
Wiem, że jest to bardzo stary post, ale chciałem tylko powiedzieć, że używanie flexbox na elemencie nadrzędnym wyłączyłoby zwijanie marginesów dla jego elementów potomnych.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-27 11:01:38
Miałem podobny problem z załamaniem marginesu, ponieważ rodzic ma position
ustawiony na relative. Oto lista poleceń, których możesz użyć, aby wyłączyć zwijanie marginesu.
OTO PLAC ZABAW DO PRZETESTOWANIA
Po prostu spróbuj przypisać dowolną parent-fix*
klasę do div.container
elementu, lub dowolną klasę children-fix*
do div.margin
. Wybierz ten, który najlepiej pasuje do Twoich potrzeb.
Kiedy
- margines upadek jest wyłączony,
div.absolute
z czerwonym tłem będzie umieszczony na samej górze strony. -
margines się zapada
div.absolute
będzie umieszczony w 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 za pomocą przykładu możesz edytować
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-01 11:23:11
W nowszych przeglądarkach (z wyjątkiem IE11), prostym rozwiązaniem zapobiegającym zapadaniu się marginesu rodzic-dziecko jest użycie display: flow-root
. Jednak nadal będziesz potrzebować innych technik, aby zapobiec zawaleniu się sąsiedniego elementu.
DEMO (before)
.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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-03-09 21:14:07
Dla Twoich informacji możesz użyć siatka ale z efektami ubocznymi:)
.parent {
display: grid
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-16 07:30:31