webdesign / development + awesome
HTML inline a block elementy
Rozdiel medzi inline a block elementami patrí medzi základné koncepty, ktoré treba pri web-stránkach pochopiť. Hlavne keď neskôr príde na CSS. Nebojte, skúsim sa vyhnúť zbytočným poučkám a prebehnem to najdôležitejšie.
Block HTML elementy
- napr.:
<div>
<p>
<h1>...<h6>
<table>
<form>
<ul>
<li>
<pre>
<blockquote>
... - zaberajú plnú šírku svojho rodiča ak mám
<div id="rodic">
široký 300px a v ňom<p id="decko">
, tak #decko sa automaticky natiahne na 300px bez ohľadu na to, koľko textu a inej hávede v sebe má - okupujú samostatný riadok zjednodušene to funguje ako keby ste pred a za element dali
<br>
- môžu obsahovať iné inline/block elementy používajú sa ako také "obaľovače" pre ostatné elementy
Inline HTML elementy
- napr.:
<span>
<a>
<img>
<strong>
<em>
<br>
<input>
... - zaberajú len koľko potrebujú
- zobrazia sa v tom istom riadku, zarovno s textom
- môžu obsahovať len inline elementy: ako
<img>
v<a>
často sa jedná o elementy s "dekoračnými" účelmi, ktoré zmenia text na tučný, zalomia riadok alebo vytvoria link
Čítajte ďalej a odhaľte silu CSS a display: inline-block;
...
CSS powers
Pomocou CSS môžeme akýkoľvek element prinútiť, aby sa správal ako block element: display: block;
alebo ako inline element display: inline;
Block elementom môžeme presne určiť šírku width: 150px;
a výšku height: 50px;
pri inline elementoch to naše pokusy často ignoruje.
Existujú aj elementy ako <script>
, ktoré nevidieť. Tieto majú display: none;
čo taktiež môžeme použiť na ktorýkoľvek element - často v kombinácii s JavaScriptom. Ak chceme aby sa paragraf textu zobrazil len ak klikneme na "viac", skryjeme ho pomocou display: none;
, javascriptom odchytíme kliknutie a pridáme mu späť pôvodnú display
hodnotu.
display: inline-block;
pro tip: mám inline element <img>
a snažím sa mu presne určiť rozmery alebo mu hodiť nejaký margin
. Odmieta to fungovať, pretože sa nejedná o block element.
Môžem však spraviť nasledovné: display: inline-block;
- obrázok zostane pekne inline v texte, avšak hľa! Superpowers! Inline obrázok získal niektoré block atribúty a rozmery a marginy fungujú :)
1 komentár
komentuj ku každému komentáru sa v databáze ukladá iba meno, text a dátum, iba za účelom zobrazenia pod článkomneukladá sa email, IP adresa ani informácie o prehliadači a údaje sa nepoužívajú na reklamu, newsletter, na žiadnu ekonomickú aktivitu, nikam sa neposielajú, sú v databáze len aby sa mohli zobraziť pod článkom
81403 [ Nedeľa 31.10.2010, 18:13 ]
Asi by sa patrilo doplniť, že <p> nemôže obsahovať ďalšie blokové elementy. Pokiaľ ich obsahuje, vypadnú za neho alebo sa bude diať iný weird shit.
Plus inline-block môže (a bude:p) blbnúť v starších IE.