 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Nenašli jste něco?
Doporučujeme: 
Podporujeme:
Reklama:
Toto fakt není SKLIK:
Autopůjčovna Praha
DDD služby
Rekonstrukce střech
Vyklízecí práce
Jak velký je ve skutečnosti blok na www stránce?
Nejsem Pixy a nechci nikoho učit CSS. Sám mám velké mezery, které se snažím zacelit. Na těchto stránkách chci pouze nabídnout pomocnou ruku začínajícím nadšencům.
Co je blok? Blok je jakýsi čtverec, obdélník, jehož rozměry určuje obsah elementu, vnitřní okraj (padding), rámeček (border) a vnější okraj (margin).
Vždy jsem si myslel, že když zadám nějakému bloku rozměr, například:
div .blok{
width: 400px;
}
bude tento rozměr neměnný, ať už s blokem budu dělat cokoli. Omyl. Rozměr bude neměnný jen potud, pokud nenastavím okraje, rámeček.
Text (když nějaký přidám a blok nebudete mít definovány okraje a rámeček) se bude dotýkat okrajů bloku.
Pokud nastavím padding na třeba 20px, například:
.blok{
width: 400px;
padding-left: 20px;
}
bude šířka bloku 400px, jen se zmenší obsahová část na 380px? Je to přesně naopak, šířka bloku bude 420px.
Příklady:
Pokud dáte rozměr bloku třeba 100px, nastavíte margin 50px, padding 50px a border 5px, bude div vypadat stejně jako v obrázku č. 1. Pro určení šířky budeme sčítat 100px(velikost bloku) + 50px(levý vnější okraj) + 50px(levý vnitřní okraj) + 5px(levý rámeček) + 50px(pravý vnější okraj) + 50px(pravý vnitřní okraj) + 5px(pravý rámeček). Jinak řečeno musíte sečíst nastavenou velikost div + vnější okraj + vnitřní okraj + rámeček. Celková výška i šířka bloku tedy bude 310px. Pokud byste definovali např. jen padding-left, součet bude samozřejmě jiný, protože nebudete přičítat pravý vnitřní okraj.
Pro určení výšky je postup stejný, jen budete sčítat horní vnější okraj + horní rámeček + horní vnitřní okraj + obsah (který si určíte v css) + spodní vnitřní okraj + spodní rámeček + spodní vnější okraj. Zase pozor pokud si zadáte jen např. padding-top, součet bude jiný!
Pokud dáte rozměr div třeba 100px, nenastavíte margin, padding a border, bude div vypadat stejně jako v obrázku č. 2. Jinak řečeno to co nastavíte v css je skutečná velikost. Celková výška i šířka bloku tedy bude 100px.
IE 5.5 a 6 ctí logiku a při přidání vnitřního okraje smrskne textový obsah prvku. Nelamte si s tím ale hlavu, protože IE 6 musí zemřít!
Linkuj.cz
Jagg.cz
Vybrali.sme.sk
Delicious.com
Facebook.com
