V príspevku o záhade s float a padding som písal o probléme, ktorý nastal pri riešení 2-stĺpcového CSS layoutu s obrázkovým pozadím. Nevedel som pochopiť záhadný vplyv padding-u. Ale Jakub Kraft - Ethanův blog mi to vysvetlil. Aj keď priznám sa neviem pochopiť, prečo sa takto browseri chovajú. Díky Jakub. Citujem:
Způsobuje to sloučování svislých okrajů. 2. možnost, jak tomu zabránit, je přidat border.
Když je element A uvnitř elementu B a A má horní a/nebo spodní margin (v tvém případě je element A prvek h1 a poslední p) a element B má nulový padding a border, tak se jejich svislé (top a bottom) okraje sloučí.
Je to zajímavé, mě to taky udivilo, ale zjistil jsem, že je to v praxi někdy celkem užitečné.
Jakub
Ahoj Jakub. Možno, že to nebolo celkom jasne napísané, ale presne tak to riešim aj ja. Len celkom nerozumiem prečo ten grafický prvok dávaš práve 1px vysoký? Je to jedno aký je vysoký.
OdpovedaťOdstrániť1px proto, aby to byl co nejmenší obrázek a rychle se přenesl :o) Takže v případě jednolitého pozadí 1px, pokud je tam nějaký vzor, tak na výšku vzoru.
OdpovedaťOdstrániť