webrebel html css javascript laravel oop php mysql wordpress kurz

HTML inline a block elementy

napísal , 31 Oct 2010 [ CSS HTML ]

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

napísal , 31 Oct 2010

1 komentár

komentuj
  1. 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.