Rychlovka z oboru #4. V praxi se často setkáváme s odsazováním pomocí prázdných odstavců. Byť je to řešení naprosto nejsnazší, není úplně správné. Možnosti jsou víceméně dvě. V dnešním článku vám popíšu jednu z nich. 

Když chystáme web "na slepo" a grafik nám nepřipraví dostatečně obsáhlou textovou stranu, daný problém zpravidla neřešíme. Pokud ovšem vytváříme novou grafiku již existujícího webu, který má dostatek obsahu pro kontrolu, můžeme formátování textů nachystat mnohem lépe. 

První věc, kterou musíme rozhodnout, je odsazování pomocí marginů či paddingů. Setkal jsem se s obojím, ale sám budu vždy preferovat spodní padding oproti hornímu a spodnímu marginu. Marginy mají tu výhodu, že se slijí dohromady, nicméně je to pořád neintuitivní chování, které se musíme v hlavě představit kdykoli, když skládáme libovolné elementy za sebe. 

Proto je za mě lepší vždy a jenom spodní odsazení. Pro * > :last-child pak stačí resetovat na nulu a máme hotovo. 

Jakmile si nastavníme nějaké globální odsazení základních typografických elementů, můžeme se zamyslet nad celkovou strukturou očekávaných článků. Používá klient 2 nadpisy za sebou? Používá klient nadpisy jen jako grafické zdůraznění nebo se jedná o logické celky, které je potřeba oddělit víc? Má klient rád vzdušné stránky, kde není vše namačkáno na sebe? 

Pokud je odpověď na většinu z těchto otázek kladná, stačí nám přidat opravdu jen pár definic, aby se výše uvedené věci začaly dít samy. Tady na blogu to dělám úplně stejně.

Globální definice

Začneme jednoduchou ukázkou kódu. Z ní je na první pohled jasné, že všechny seznamy a nadpisy, které budou natvrdo v šabloně musíme redefinovat. Ale ono se stačí zamyslet nad poměrem: Omezený počet elementů v šablonách vs. libovolný počet html textu, který nám do šablony dodá systém? Nutnost ručně přidávat všechny definice pokaždé, když přidám novou typovou šablonu? Ne, děkuji. Raději si těch pár prvků mimo obsahovou oblast zresetuji sám. 

h1 {padding-bottom:4rem;}

p,
h2,
h3 {padding-bottom:2rem;}

ul, 
ol, 
table {margin-bottom:2rem;}

h4,
h5 {padding-bottom:1rem;}

Mějme základní definice odsazení. 40 pixelů pro nadpis první úrovně, 20 pixelů pro zbytek. Následující kód vyřeší groupování jednotlivých sekcí tak, abychom v administraci nemuseli řešit vůbec nic navíc. (Komponenty, x různých html bloků pod sebou, oddělovače...) 

Logický blok začíná nadpisem

Každý nadpis bude odsazen o dalších 20 (10, 5) pixelů, pokud před ním není jiný nadpis stejné nebo vyšší úrovně. 

.article-detail {

	*:not(h2) + h2 {padding-top:2rem;} 
	*:not(h2):not(h3) + h3 {padding-top:1rem;} 
	*:not(h2):not(h3):not(h4) + h4 {padding-top:0.5rem;} 

}

Je to takhle jednoduché. 

Dvojité odsazení

Použití padding-bottom namísto dvojitého marginu má ještě další výhodu, kterou je automatické zvedání hodnot u prvků typu <table>. Tabulka musí být vždy odsazena marginem. Pokud chceme pro náš příklad zvednout její odsazení na dvojnásob, nemusíme se bát spojení marginu s předchozím prvkem. 

Chceme-li zdůraznit tabulku, která je přesně mezi dvěma odstavci, stačí jednoduše:

p + table {margin-top:2rem;}
p + table + p {padding-top:2rem;}

Spolu s výchozím odsazením, které prvky zdědily z prvního bloku kódu, máme krásných 40 pixelů z obou stran.