CSS box model: margin vs padding, border, display | We.Inc
Versleep schuifregelaars voor content, padding, border en margin en zie het box model opnieuw tekenen, met box-sizing, margin collapsing, borderstijlen en elke display-waarde live vergeleken.
Elk element wordt getekend als geneste rechthoeken: de content, dan padding (ruimte binnen de border, gevuld met de achtergrond), dan de border, dan margin (transparante ruimte daarbuiten die buren wegduwt). Met box-sizing: border-box omvat de breedte die u instelt ook padding en border, waardoor layouts veel voorspelbaarder worden. De display-property bepaalt hoe boxen vloeien.
De vier lagen, van binnen naar buiten
Laag
Wat het doet
Krijgt de achtergrond?
Content
Bevat tekst, afbeeldingen en child-elementen
Ja
Padding
Ademruimte tussen content en border
Ja
Border
Een zichtbare lijn (of niets) rond de padding
Eigen borderkleur
Margin
Ruimte tussen deze box en zijn buren
Nee, altijd transparant
Beweeg de vier schuifregelaars en het diagram, de gemeten totale grootte en de CSS veranderen samen mee. Onder de visualisatie kunt u box-sizing omschakelen, twee margins zien samenvallen tot één, en block, inline, inline-block, flex, grid en none naast elkaar vergelijken op dezelfde drie items.
Stel een breedte en hoogte in voor het contentgebied en voeg daarna padding, border en margin toe met de schuifregelaars.
Schakel box-sizing tussen content-box en border-box en zie hoe de weergegeven breedte verandert.
Lees de totale breedte en hoogte af die het element echt inneemt, inclusief margins.
Kopieer de gegenereerde CSS en scroll dan naar beneden voor de demo's van margin collapse en display.
Zet *, *::before, *::after { box-sizing: border-box; } bovenaan elke stylesheet. De meeste resets en frameworks doen dat al.
Gebruik padding als de achtergrond of het klikgebied moet meegroeien, en margin als u alleen afstand tussen losse dingen wilt.
Gebruik in een flex- of gridcontainer liever gap dan margins op de children. Dat verdubbelt nooit aan de randen.
Outline wordt buiten de border getekend en neemt geen ruimte in, en daarom gebruiken focusringen outline in plaats van border.
Veelgestelde vragen
Wat is het verschil tussen margin en padding?
Padding zit binnen de border, wordt dus gevuld door de achtergrond van het element en hoort bij het klikbare gebied. Margin zit buiten de border, is altijd transparant en scheidt het element alleen van andere. Verticale margins tussen blokken kunnen bovendien samenvallen, terwijl padding nooit samenvalt.
Waarom is mijn element breder dan de breedte die ik instelde?
Bij de standaard box-sizing: content-box geldt width alleen voor de content, en komen padding en border erbovenop. Een box van 300px met 20px padding en een border van 2px wordt 344px breed weergegeven. Schakel naar box-sizing: border-box en hij blijft 300px, waarbij de content krimpt om te passen.
Wanneer vallen margins samen?
Boven- en ondermargins van blokboxen in de normale flow versmelten als ze elkaar raken: tussen broers en zussen, en tussen een parent en zijn eerste of laatste child als geen border, padding of inline content ze scheidt. De grootste margin wint. Margins vallen nooit samen binnen flex- of gridcontainers, of horizontaal.
Wat is het verschil tussen display: none en visibility: hidden?
display: none haalt het element volledig uit de layout, dus de ruimte sluit zich en schermlezers slaan het over. visibility: hidden houdt de ruimte gereserveerd maar tekent niets, en de inhoud is ook verborgen voor hulptechnologie. opacity: 0 behoudt zowel de ruimte als de mogelijkheid om te klikken of te focussen.
Kan ik width instellen op een inline element?
Nee. Width, height en verticale margins worden genegeerd op een gewone inline box zoals een span. Verticale padding wordt wel getekend, maar duwt regels niet uit elkaar. Maak er inline-block van, of maak de parent een flexcontainer, en die afmetingen gaan gelden.
content-box versus border-box in getallen
Bij content-box is de totale breedte gelijk aan width plus linker- en rechterpadding plus linker- en rechterborder. De margin komt daar nog buiten bij. Dit was het oorspronkelijke gedrag van CSS en het is nog steeds de browserstandaard voor de meeste elementen.
Bij border-box wordt de breedte die u schrijft gemeten tot de buitenrand van de border. Padding en border gaan ten koste van het contentgebied in plaats van de box te laten groeien, dus een layout met twee kolommen van 50% plus 50% blijft op één regel, hoeveel padding u ook toevoegt.
Borders voorbij een gewone lijn
De border-shorthand accepteert een breedte, een stijl en een kleur in willekeurige volgorde. De stijlen zijn solid, dashed, dotted, double, groove, ridge, inset, outset, none en hidden. Een border met stijl none heeft breedte nul, welke breedte u ook schreef, wat mensen verrast die alleen border-width instellen.
border-radius rondt in huidige browsers de hoeken van de border, de achtergrond en de outline af. Eén waarde rondt alle vier de hoeken af; een schuine streep stelt aparte horizontale en verticale radii in voor elliptische hoeken, en 50% op een vierkant maakt er een cirkel van.
Hoe display de box verandert
block-boxen beginnen op een nieuwe regel en rekken uit om hun container te vullen. inline-boxen vloeien mee in een tekstregel en negeren width en height. inline-block vloeit als tekst maar accepteert afmetingen en verticale margins, wat handig is voor badges en knoppen.
flex en grid maken het element aan de buitenkant een block en aan de binnenkant een layoutcontainer. Hun children gedragen zich niet langer als block of inline, maar volgen de flex- of gridregels, met gap voor de tussenruimte. contents verwijdert de box zelf maar behoudt de children, maar heeft een geschiedenis van toegankelijkheidsbugs, dus test het met een schermlezer voordat u erop vertrouwt.
Margin of padding? Kies op basis van de taak
Welke u moet gebruiken
U wilt
Gebruik
Dat de achtergrondkleur de ruimte bedekt
Een groter tikgebied op een knop
Ruimte tussen twee losse kaarten
margin, of gap op de parent
Eén item naar het uiterste einde van een flexrij geduwd
margin-left: auto
Een blok met vaste breedte gecentreerd
margin-inline: auto
Ruimte die nooit met een buur kan samenvallen
padding, of gap
Margin collapsing, live te zien
Het eerste paar toont twee broers en zussen waarvan de margins van 24px en 40px elkaar raken: de ruimte is 40px, niet 64px. Het tweede paar zit in een flow-root-container, die voorkomt dat de margins van parent en child versmelten, en het derde gebruikt flex, waarin niets samenvalt.
Samenvallen tussen siblings en tussen parent en child
Pas de margins aan en kijk naar de tussenruimtes. padding-top: 1px toevoegen aan de buitenste box voorkomt ook dat parent en child versmelten.
Borderstijlen en radius
Alle acht zichtbare borderstijlen
groove, ridge, inset en outset geven de border schaduw om diepte te suggereren. Ze zien er het best uit bij 4px of breder.
Radiusvormen: afgerond, pil, cirkel, ellips
Een enorme radius zoals 999px maakt een pil van elke lengte. 50% op een vierkant geeft een cirkel.
Elke display-waarde op dezelfde drie items
display-waarden vergeleken
Waarde
Nieuwe regel?
Werken width en height?
Typisch gebruik
Tailwind
Ja
Ja
Secties, alinea's, kaarten
Nee
Nee
Woorden in een zin
Nee
Ja
Badges, knoppen in een tekstregel
Ja
Ja
Rijen of kolommen met items
Nee
Ja
Een icoon en label binnen tekst
Ja
Ja
Tweedimensionale layouts
Nee
Ja
Een klein grid dat in een regel staat
Ja
Ja
Omsluit floats en margins van children
Box verwijderd
Geen box om af te meten
Children laten meedoen in de layout van de parent
Uit de layout gehaald
Niet gerenderd
Volledig verbergen
block, inline, inline-block, flex en grid naast elkaar
Elke rij bevat dezelfde drie spans met width: 80px en padding. Alleen inline negeert de breedte.
display: none vs visibility: hidden vs opacity: 0
Drie manieren om te verbergen, vergeleken
Property
Behoudt zijn ruimte?
Klikbaar of focusbaar?
Voorgelezen door schermlezers?
Kan een transition hebben?
display: none
Nee
Nee
Nee
Alleen met allow-discrete in nieuwere browsers
visibility: hidden
Ja
Nee
Nee
Ja, schakelt aan het eind of begin om
opacity: 0
Ja
Ja
Ja
Ja, vloeiend
Het middelste item op drie manieren verborgen
Let op de lege ruimte die visibility en opacity achterlaten, en de gesloten ruimte bij display: none.
De border-box-reset
Overal border-box toepassen
De pseudo-elementen zijn erbij genomen omdat het ook boxen zijn. Preflight van Tailwind levert deze regel al mee.
Tailwind-equivalenten
Box model-utilities in Tailwind (standaard spacingschaal, 1 eenheid = 0.25rem)
CSS
Tailwind
padding: 1rem
padding-inline: 1.5rem
margin-top: 2rem
margin-inline: auto
border-width: 1px / 2px
border / border-2
border-style: dashed
border-radius: 0.5rem
border-radius: 9999px
box-sizing: border-box / content-box
box-border / box-content
visibility: hidden
opacity: 0
Box model visualisatie
Marginlaag
Weergegeven box (rand van de border)
Ingenomen ruimte, inclusief margins
Geel is margin, de blauwe lijn is de border, groen is padding, lichtblauw is content.