Good ol’ Rörelsemarginal på att Kollapsa

0
66

Här är ett kortfattat blogginlägg om marginal kollapsande: När två block element som är staplade ovanpå varandra, vertikalt utrymme mellan dem är större mellan en på toppen är margin-bottom och en på den nedre marginal-top.

Det är lite konstigt och ascii-shruggy. Par smärre problem med dem, som du kanske tror.

Jag tycker det är fascinerande hur det blir för den perfekta slags mini-blogg inlägg när människor har en ah-ha nu om det. MDN även finner det lämpligt att ha en särskild sida.

Adam Roberts 2015:

Även om marginalen kollaps beteende är till en början lite intuitiv, det gör livet enklare i fall av flera kapslade element, där beteendet är ofta önskvärt.

Andrew Bevilja 2015:

Det är nog inte den mest intuitiva av CSS, men takeaway här är att det finns en viss logik i att spela och när du har lärt det, mysterium och förvirring plötsligt försvinner!

Geoff Graham 2015:

Vill du se hur kollapsar marginaler kan göra det knepigt? Jag personligen möta detta på ett frustrerande ofta när det handlar om typografi.

Magnus Benoni 2016:

Marginalen på att kollapsa kan vara frustrerande att handskas med, men att veta när och hur det händer och kommer att göra det lättare för dig att åtgärda problem när de uppstår.

Ire Aderinokun 2017:

Hopfällbar marginalerna kan vara jobbigt om du inte riktigt förstår när de uppstår. Det första steget för att hantera eller undvika dem är att förstå exakt vilken gång i hopfällbar marginaler vi har att göra med.

Adam Laki 2018:

Marginalen kollaps är något som nämns i varje CSS bokens första eller andra kapitlet. När jag lärde mig om formatmallar i en lång tid sedan, naturligtvis, jag läste om det.

Jonathan Harrell 2018:

Begreppet marginal kollaps är grundläggande för förståelsen av box-modellen i CSS, men det är faktiskt ganska komplicerad och potentiellt förvirrande. Spec beskriver hur marginal kollaps verk är omfattande, men svåra att förstå.

Jag behöver inte alla dessa att säga att det är en över-bloggat föremål (ingenting), men att det är en intressant tråd att följa. När så många människor känner behov av att förklara något som i slutändan så liten, det är något konstigt (förmodligen dålig) händer det.

Ingen tvekan om att detta är varför det anses som ett av de misstag i utformningen av CSS:

Den övre och undre marginalen av en låda som aldrig borde ha tillåtits att kollapsa ihop automatiskt när detta är roten till alla marginal-kollapsar onda.

Tonvikten deras och är i själva verket den enda fet text i hela listan.

Om du letar efter för att stoppa beteendet, måste du göra något som förmodligen har mer biverkningar än det är värt, som flyter element. Det är inte riktigt så enkelt som att sparka igång ett nytt Block Formatering Sammanhang, eftersom det är vad display: flow-rot; gör och som inte fungerar.

Du är förmodligen bättre att bara veta om det och arbetar med det som det kommer upp genom att systematiskt flyter marginaler i en riktning, eller få konstiga.