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ú :)