Good ol’ Margin Kollapse

0
85

Her er en ett-setning blogginnlegg om margin kollapser: Når to blokkere elementer som er stablet oppå hverandre, og den vertikale avstanden mellom dem er større mellom en på toppen er margin-bottom og en på bunnen er margin-top.

Det er litt rare og ascii-shruggy. Par begrensninger med dem, som du kan forvente.

Jeg synes det er fascinerende hvordan det gir den perfekte slags mini blogginnlegg når folk har en ah-ha-øyeblikk om det. MDN selv ser passe å ha en dedikert side.

Adam Roberts i 2015:

Selv om marginen kollaps atferd er først litt unintuitive, det gjør livet lettere i tilfelle av flere nestede elementer, hvor atferd er ofte ønskelig.

Andrew Grant i 2015:

Det er nok ikke den mest intuitive aspekt av CSS, men takeaway her er at det er noen logikk i spillet, og når du har lært det, mysterier og forvirring plutselig forsvinner!

Geoff Graham i 2015:

Vil du se hvordan slå sammen marg kan gjøre ting vanskelig? Jeg personlig opplever dette på en frustrerende jevne mellomrom når du arbeider med typografi.

Magnus Benoni i 2016:

Margin kollapser kan være frustrerende å forholde seg til, men å vite når og hvordan det skjer, vil gjøre det enklere for deg å løse problemer når de oppstår.

Ire Aderinokun i 2017:

Sammenleggbare marginene kan være smertefullt hvis du ikke skal forstå når de oppstår. Det første trinnet for å håndtere eller å unngå dem, er [til] å forstå nøyaktig hvilke tilfelle av sammenleggbare marginer vi arbeider med.

Adam Laki i 2018:

Margin kollaps er noe som er nevnt i hver CSS-boken er første eller andre kapittel. Da jeg lærte om stilark i en lang tid siden, selvfølgelig, jeg leste om det.

Jonathan Harrell i 2018:

Begrepet margin kollaps er grunnleggende for en forståelse av boksen modellen i CSS, men det er faktisk ganske komplisert og potensielt forvirrende. Spec som beskriver hvordan margin kollaps virker grundig, men vanskelig å forstå.

Jeg er ikke poenget alle disse ut å si at det er en over-blogget emne (ingenting), men at det er en interessant tråd å følge. Når så mange mennesker føler behov for å forklare noe til syvende og sist så liten, det er noe merkelig (sannsynligvis dårlig) skjer det.

Ingen tvil om dette er hvorfor det er ansett som en av feil i design i CSS:

Den topp-og bunnmargen i en boks som aldri burde vært tillatt å kollapse sammen automatisk, da dette er roten til alt margin-kollapse onde.

Vekt deres og er, faktisk, den eneste fet tekst i det hele listen.

Hvis du ønsker å stoppe atferd, vil du trenger å gjøre noe som nok har flere bivirkninger enn det er verdt, som flyte-elementer. Det er ikke helt så enkelt som sparker i gang en ny Blokk Formatering Sammenheng, så det er hva display: flow-rot, gjør og som ikke fungerer.

Du er sannsynligvis bedre av bare å vite om det og håndtere det som det kommer opp ved systematisk flyter marginer i en retning, eller å bli rart.