Hvad du ikke ved om beregning af procentmarginaler i CSS

De fleste webdesignere tror at de kender CSS ganske godt. Der er trods alt ikke så meget til det - nogle selektortyper, et par dusin egenskaber og nogle kaskaderegler, som du næppe behøver at huske, da de koger ned til sund fornuft. Men når du kommer til det nitty-gritty niveau, er der masser af uklare detaljer, som få designere virkelig forstår.

Da jeg undersøgte resultaterne af en gratis CSS-test, jeg har tilbudt online i de sidste seks måneder, opdagede jeg et spørgsmål der næsten ingen har ret. Af de tusindvis af mennesker, der tog testen, færre end 14% fik det rigtigt.

Spørgsmålet koger ned til dette: Hvordan beregner du procentsatsmargener?

Spørgsmålet

Sig dit websted har en container div, og inde i det, et indhold div:

Lad os nu give det indhold div en topmargin:

.indhold margin-top: 10%;

Okay, så det er 10% ... men 10% af hvad? Det er spørgsmålet om det kun 13,8% af befolkningen kan svare korrekt. Og husk: Disse mennesker har adgang til Google!

Hvad jeg elsker om dette spørgsmål er det det lader til, at svaret skal være indlysende. Så meget, at jeg formoder, at de fleste bare tager et gæt (og gæt galt). Men måske det ikke synes indlysende for dig. Jeg mener, hvis du virkelig bruger din fantasi, er der mange måder browseren kunne tænke sig at beregne en margen som denne.

Så hvad med om jeg smækker det ned for dig, da spørgsmålet i testen faktisk er flere valg. Her er dine muligheder:

10% af indholdets div er højde
10% af container div er højde
10% af indholdsdelens bredde
10% af container div'ens bredde

Husk, at kun 13,8% af mennesker kan vælge det rigtige svar fra denne liste. Det er lidt værre end chance!

Se nøje på svarene; du vil se, at der kun er to ting, du skal vide:

Container eller indhold?

For det første er størrelsen af margenen baseret på størrelsen af indholdet div selv, eller på størrelsen af container div?

Nu er det ikke noget, men du kan sikkert stole på dine instinkter. Hvis jeg sætter en div til 50% af bredden af dens beholder, og så vil jeg have sine venstre og højre margener for at fylde resten af rummet, ville jeg naturligvis sætte dem til 25% hver (så procentsatserne supplerer 100%). For at kunne arbejde skal procentmarginerne baseres på beholderens dimensioner.

Sikkert nok, to tredjedele af de mennesker, der tager testen, får denne del af svaret rigtigt.

Bredde eller Højde?

Sekund, er margin-tops størrelse baseret på bredden eller højden af elementet?

Hvis du har været opmærksom, er du sikkert allerede på vagt. For så få mennesker at vælge det rigtige svar, må det være et lure spørgsmål, rigtigt?

Og alligevel, jeg vedder på, at du næsten ikke kan tro på det svaret er ikke højde. Nå, det er det ikke.

Ja, vi taler om en topmargen her. Ja, størrelsen af denne margen er en lodret måling. Ja, hvis en blok er 50% af beholderens højde, og du gav den en topmargin på 25%, ville du forvente at være 25% af beholderens højde. Og du ville have det galt.

Må ikke være dårligt, hvis du troede, at det måtte være højde. Næsten 80% af dem, der tager testen, er enige med dig:

Det gør mening ... Nej, virkelig!

Tror du stadig ikke på det? Her er et citat fra W3C CSS spec:

Procentdelen beregnes i forhold til bredden af den frembragte boks indeholdende blok. Bemærk at dette også gælder for margin-top og margin-bottom.

Det samme gælder for top og nederste polstring, hvis du undrer dig. Hvad angår grænser, er det ulovligt at angive deres bredde i procent.

Så på dette tidspunkt tror du sandsynligvis, at skaberne af CSS er enten skrupskør, eller de lavede bare en virkelig dum fejl. Men jeg er her for at fortælle dig, at der er to gode grunde til at basere lodrette margener på bredden af den indeholdende blok:

Horisontal og vertikal konsistens

Der er selvfølgelig en stenografiegenskab, der lader dig angive margenen for alle fire sider af en blok:

margen: 10%;

Dette udvides til:

margin-top: 10%; margin-højre: 10%; margin-bund: 10%; margin-venstre: 10%;

Nu, hvis du skrev en af ovenstående, ville du nok forvente, at margenerne på alle fire sider af blokken vil være lige store, ville du ikke? Men hvis margen-venstre og margen-højre var baseret på beholderens bredde, og margen-top og margen-bunden var baseret på dens højde, så ville de normalt være forskellige!

Undgå cirkulær afhængighed

CSS lægger indhold i blokke stablet lodret ned på siden, så bredden af en blok er normalt dikteret helt af bredden af sin overordnede. Med andre ord kan du beregne bredden af en blok uden at bekymre sig om hvad der er inde den blok.

Højden af en blok er en anden sag. Normalt højden afhænger af den samlede højde af dens indhold. Ændre indholdets højde, og du ændrer blokens højde. Se problemet?

For at få indholdets højde skal du kende de øverste og nederste margener, der anvendes på den. Og hvis disse margener afhænger af højden af forældreblokken, er du i problemer, fordi du ikke kan beregne en uden at kende den anden!

Basere vertikale margener på bredde af beholderen bryder den cirkulære afhængighed og gør det muligt at udforme siden.

Ace klassen

Så der har du det: det sværeste spørgsmål på testen, og nu kan du svare på det. Vil du vide, hvordan du vil gøre på resten af testen? Prøv det selv. Jeg lover, de fleste af spørgsmålene er meget lettere end denne.

I mellemtiden er jeg på jagt efter et nyt hårdste spørgsmål! Hvilken detaljer af CSS tror du ingen ved?

Redaktørens note: Dette er skrevet til Hongkiat.com af Kevin Yank. Kevin har skrevet om internettet siden 1999, med bøger om PHP, CSS og JavaScript til hans navn. Han er også vært for podcasts, talt på konferencer og produceret video træning, alt om internettet. Han leder nu udviklingsholdet på Sit the Test, en webapplikation til at lave og tage online-test.

Mere om Hongkiat:

Web Design: Lige kolonnehøjde med CSS
6 CSS-tricks til at justere indholdet lodret
Et kig på CSS-enheder: Pixels, EM og Procent
Et kig på: CSS3 Box-dimensionering

Læs nu: 10 Skjulte CSS3 Egenskaber du bør vide