Wat u niet weet over het berekenen van percentagemarges in CSS
De meeste webontwerpers denken dat ze CSS goed kennen. Er is tenslotte niet zoveel aan - een paar selector types, een paar dozijn eigenschappen en enkele trapsgewijze regels die je nauwelijks hoeft te onthouden, omdat ze op gezond verstand aansluiten. Maar wanneer u op het nitty-gritty niveau komt, zijn er tal van obscure details die maar weinig ontwerpers echt begrijpen.
Toen ik de resultaten van een gratis CSS-test die ik de afgelopen zes maanden online heb aangeboden heb onderzocht, ontdekte ik dat een vraag die bijna niemand heeft gelijk. Van de duizenden mensen die de test hebben afgelegd, minder dan 14% heeft het goed gedaan.
De vraag komt hierop neer: Hoe berekent u percentagemarges?
De vraag
Stel dat uw site een container heeft div, en daarbinnen een inhoud div:
Laten we die inhoud eens geven div een topmarge:
.inhoud margin-top: 10%;
Oké, het is dus 10% ... maar 10% van wat? Dat is de vraag die slechts 13,8% van de mensen kan correct antwoorden. En houd er rekening mee: deze mensen hebben toegang tot Google!
Wat ik zo leuk vind aan deze vraag is dat het lijkt erop dat het antwoord duidelijk moet zijn. Zo erg zelfs, dat ik vermoed dat de meeste mensen een gokje wagen (en raad eens). Maar misschien wel niet lijken u duidelijk. Ik bedoel, als je echt je fantasie gebruikt, zijn er veel manieren waarop de browser een marge als deze zou kunnen berekenen.
Dus wat als ik het voor u beperk, omdat de vraag in de test eigenlijk meerkeuze is. Dit zijn je opties:
- 10% van de hoogte van de inhoud div
- 10% van de hoogte van de container-div
- 10% van de breedte van de content div
- 10% van de breedte van de container-div
Onthoud dat slechts 13,8% van de mensen het juiste antwoord uit deze lijst kan kiezen. Dat is veel erger dan kans!
Kijk goed naar de antwoorden; je zult zien dat er eigenlijk maar twee dingen zijn die je moet weten:
Container of inhoud?
Ten eerste, is de grootte van de marge op basis van de grootte van de inhoud div zelf, of op de grootte van de container div?
Dit is geen goed idee, maar u kunt waarschijnlijk op uw instincten vertrouwen. Als ik een div als 50% van de breedte van de container instel, en dan wil ik dat de linker- en rechtermarges de rest van de spatie vullen, zou ik ze natuurlijk instellen op 25% elk (dus de percentages tellen op tot 100%). Om dat te laten werken, moeten de procentuele marges worden gebaseerd op de afmetingen van de container.
Zeker genoeg, twee derde van de mensen die de test afleggen, krijgen dit deel van het antwoord goed.
Breedte of hoogte?
Tweede, is de grootte van de margin-top op basis van de breedte of hoogte van dat element?
Als je oplet, ben je waarschijnlijk al op je hoede. Voor zo weinig mensen om het juiste antwoord te kiezen, moet dit een strikvraag zijn, toch??
En toch, ik wed dat je dat amper kunt geloven het antwoord is niet hoogte. Nou, dat is het niet.
Ja, we hebben het hier over een topmarge. Ja, de grootte van die marge is een verticale meting. Ja, als een blok 50% van de hoogte van de container is en je hebt een bovenmarge van 25% gegeven, zou je verwachten dat dit 25% van de hoogte van de container is. En je zou fout zijn.
Voel je niet slecht als je dacht dat het hoogte moest zijn. Bijna 80% van de mensen die de test afleggen, is het met u eens:
Het doet zin ... Nee, echt!
Geloof je het nog steeds niet? Hier is een citaat uit de W3C CSS-specificatie:
Het percentage wordt berekend met betrekking tot de breedte van het blok dat de gegenereerde box bevat. Merk op dat dit ook geldt voor margin-top en margin-bottom.
Hetzelfde geldt voor boven- en ondervulling, voor het geval je je dit afvroeg. Wat betreft grenzen, het is illegaal om hun breedte als een percentage op te geven.
Dus op dit punt denk je waarschijnlijk dat de makers van CSS dat ook zijn waanzinnig, of ze maakten gewoon een hele stomme fout. Maar ik ben hier om u te vertellen dat er twee goede redenen zijn om verticale marges te baseren op de breedte van het bevattende blok:
Horizontale en verticale consistentie
Er is natuurlijk een steno-eigenschap waarmee u de marge voor alle vier zijden van een blok kunt opgeven:
marge: 10%;
Dit breidt uit naar:
margin-top: 10%; marge-recht: 10%; margin-bottom: 10%; marge links: 10%;
Nu, als je een van de bovenstaande dingen hebt geschreven, zou je waarschijnlijk verwachten dat de marges aan alle vier zijden van het blok even groot zijn, nietwaar? Maar als marge-links en marge-rechts waren gebaseerd op de breedte van de container, en marge-boven en marge-onderkant waren gebaseerd op de hoogte, dan waren ze meestal anders!
Circulaire afhankelijkheid vermijden
CSS legt inhoud uit in blokken die verticaal op de pagina zijn gestapeld, dus de breedte van een blok wordt meestal volledig bepaald door de breedte van het bovenliggende element. Met andere woorden, dat kan bereken de breedte van een blok zonder je zorgen te maken over wat er is binnen dat blok.
De hoogte van een blok is een andere zaak. Meestal is de hoogte hangt af van de gecombineerde hoogte van de inhoud. Wijzig de hoogte van de inhoud en u wijzigt de hoogte van het blok. Zie het probleem?
Om de hoogte van de inhoud te krijgen, moet u de boven- en ondermarges kennen die erop worden toegepast. En als die marges afhankelijk zijn van de hoogte van het bovenliggend blok, zit je in de problemen, omdat je niet kunt berekenen zonder de ander te kennen!
Verticale marges baseren op de breedte van de container breekt die cirkelafhankelijkheid en maakt het mogelijk om de pagina in te delen.
Ace the Class
Dus daar heb je het: de moeilijkste vraag van de test, en nu kun je die beantwoorden. Wilt u weten hoe u de rest van de test zou doen? Probeer het zelf. Ik beloof dat de meeste vragen veel gemakkelijker zijn dan deze.
Ondertussen ben ik op zoek naar een nieuwe moeilijkste vraag! Welk detail van CSS denk je dat niemand weet?
Opmerking van de uitgever: Dit is geschreven voor Hongkiat.com door Kevin Yank. Kevin heeft sinds 1999 over internet geschreven, met boeken over PHP, CSS en JavaScript op zijn naam staan. Hij heeft ook podcasts gehost, gesproken op conferenties en videotrainingen gemaakt, alles over het web. Hij leidt nu het ontwikkelingsteam van Sit the Test, een webapplicatie voor het maken en nemen van online tests.
Meer over Hongkiat:
- Webontwerp: gelijke kolomhoogte met CSS
- 6 CSS-trucs om inhoud verticaal uit te lijnen
- Een kijkje in CSS-eenheden: pixels, EM en percentage
- Een kijkje in: CSS3 Box-dimensionering
Lees nu: 10 verborgen CSS3-eigenschappen die u moet weten
