Co nevíte o výpočtu procenta marží v CSS

Většina webových designérů si myslí, že dobře znají CSS. Koneckonců, k tomu není moc - několik typů selektorů, několik tuctů vlastností a nějaká kaskádová pravidla, která si sotva musíte zapamatovat, protože se zredukují na zdravý rozum. Ale když se dostanete na úroveň dusno-drsných, existuje spousta nejasných detailů, kterým jen málo designérů skutečně rozumí.

Když jsem zkoumal výsledky bezplatného CSS testu, který jsem nabídl on-line za posledních šest měsíců, zjistil jsem jedna otázka, která téměř nikdo dostal pravdu. Z tisíců lidí, kteří test provedli, méně než 14%.

Otázka se snižuje na toto: Jak vypočítáte procento marží?

Otázka

Řekněte, že vaše stránky mají kontejner div, a uvnitř toho obsahu div:

Dejme tomu obsahu div horní okraj:

.obsah margin-top: 10%;  

Dobře, takže je to 10% ... ale 10% co? To je otázka pouze 13,8% lidí může odpovědět správně. Mějte na paměti, že tito lidé mají přístup k Googlu!

Na této otázce mám rád to zdá se, že odpověď by měla být zřejmá. Tak moc, že ​​mám podezření, že většina lidí se jen hádá (a hádejte špatně). Ale možná to ne Zdá se vám to jasné. Chci říct, že pokud opravdu používáte svou představivost, existuje mnoho způsobů, jak by prohlížeč mohl takto vypočítat marži.

Tak co kdybych to zúžil, protože otázka v testu je vlastně vícenásobná volba. Zde jsou vaše možnosti:

• 10% výšky obsahu div
• 10% výšky kontejneru div
• 10% šířky obsahu div
• 10% šířky kontejneru

Nezapomeňte, že pouze 13,8% lidí si může vybrat správnou odpověď z tohoto seznamu. Je to horší než šance!

Podívejte se pozorně na odpovědi; uvidíte, že opravdu potřebujete jen dvě věci:

Kontejner nebo obsah?

Za prvé, je velikost marže založená na velikosti samotného obsahu div, nebo na velikosti kontejneru div?

Teď to není gimme, ale můžete pravděpodobně věřit svým instinktům. Pokud nastavím div na 50% šířky jeho kontejneru a pak chci, aby jeho levý a pravý okraj zaplnil zbytek prostoru, přirozeně bych je nastavil na 25% (takže procenta se sčítají na 100%). Aby to fungovalo, musí být procentuální rozpětí založena na rozměrech kontejneru.

Jistě, dvě třetiny lidí, kteří si test vyzkoušejí, dostanou tuto část odpovědi správně.

Šířka nebo výška?

Druhý, je okrajová velikost založená na šířce nebo výšce tohoto prvku?

Pokud jste věnovali pozornost, jste pravděpodobně na své stráži. Pro tak málo lidí, aby si vybrali správnou odpověď, musí to být triková otázka, správně?

Vsadím se však, že tomu sotva můžete uvěřit odpověď není výška. No, to není.

Ano, tady mluvíme o horním okraji. Ano, velikost tohoto rozpětí je vertikální měření. Ano, pokud je blok 50% výšky jeho kontejneru a vy jste mu dali horní hranici 25%, očekáváte, že bude 25% výšky kontejneru. A mýlíte se.

Necítíte se špatně, pokud jste si mysleli, že to musí být výška. Téměř 80% lidí, kteří test provedou, s vámi souhlasí:

To dělá smysl ... Ne, vážně!

Nevěřte tomu? Zde je citace z specifikace W3C CSS:

Procenta se vypočítá s ohledem na šířku bloku, který obsahuje generovaný box. Všimněte si, že to platí i pro okrajové a okrajové.

Totéž platí pro horní a dolní polstrování, v případě, že jste přemýšlel. Pokud jde o hranice, je nezákonné určit jejich šířku jako procento.

Takže v tomto bodě si pravděpodobně myslíte, že tvůrci CSS jsou buď bonkers, nebo prostě udělali opravdu hloupou chybu. Ale já vám chci říct, že existují dva dobré důvody, proč se vertikální okraje zakládají na šířce bloku obsahujícího blok:

Horizontální a vertikální konzistence

Samozřejmě existuje zkrácená vlastnost, která umožňuje určit okraj pro všechny čtyři strany bloku:

marže: 10%;

Tím se rozšíří na:

marže: 10%; právo na marži: 10%; dolní mez: 10%; margin-left: 10%;

Kdybyste napsali některý z výše uvedených bodů, pravděpodobně byste očekávali, že okraje na všech čtyřech stranách bloku budou stejně velké, že? Pokud by však levý okraj a pravý okraj byly založeny na šířce kontejneru a okraj nahoře a okrajový okraj byly založeny na jeho výšce, pak by obvykle byly odlišné.!

Vyvarování se kruhové závislosti

CSS ukládá obsah v blocích naskládaných svisle dolů po stránce, takže šířka bloku je obvykle diktována zcela šířkou jeho rodiče. Jinými slovy, můžete vypočítat šířku bloku bez obav z toho, co je uvnitř tento blok.

Výška bloku je jiná záležitost. Obvykle výška závisí na kombinované výšce jejího obsahu. Změňte výšku obsahu a změňte výšku bloku. Podívejte se na problém?

Chcete-li získat výšku obsahu, musíte znát horní a dolní okraj, který se na něj vztahuje. A pokud tyto okraje závisí na výšce rodičovského bloku, máte potíže, protože ho nemůžete spočítat, aniž byste znali druhého!

Na základě vertikálních okrajů šířka Kontejner přeruší tuto kruhovou závislost a umožní rozložení stránky.

Ace třídy

Takže tam to máte: nejtěžší otázka na zkoušce, a teď můžete odpovědět. Chcete vědět, jak byste měli udělat zbytek testu? Zkus to sám. Slibuji, že většina otázek je mnohem jednodušší než tohle.

Mezitím jsem hledal novou nejtěžší otázku! Jaký detail CSS si myslíte, že to nikdo neví?

Poznámka editora: Toto je napsáno pro Hongkiat.com by Kevin Yank. Kevin psal o webu od roku 1999, s jeho knihami o PHP, CSS a JavaScriptu. On také hostil podcasty, mluvený na konferencích, a produkoval video školení, všichni o webu. Nyní vede vývojový tým v Sit the Test, webové aplikaci pro tvorbu a přijímání online testů.

Více o Hongkiatu:

• Web Design: Rovná výška sloupců s CSS
• 6 CSS triky pro zarovnání obsahu svisle
• Pohled do jednotek CSS: Pixely, EM a procento
• Pohled do: CSS3 Box-velikosti

Nyní si přečtěte: 10 Skryté vlastnosti CSS3, které byste měli vědět