Display-ominaisuus: Block, Inline ja Inline-block

HTML-elementit käyttäytyvät eri tavoin riippuen siitä, ovatko ne block, inline vai inline-block. Nämä näyttötyypit vaikuttavat asetteluun, välistyksiin ja siihen, mitä CSS-ominaisuuksia voidaan käyttää.

Block-elementit

• Alkavat uudelta riviltä;
• Vievät koko säiliön leveyden;
• Tukevat width-, height-, margin-, padding- ja border-ominaisuuksia.

Yleisiä esimerkkejä: <div>, <p>, <ul>, <li>, <h1>–<h6>.

Inline-elementit

• Pysyvät samalla rivillä;
• Vievät vain sisältönsä tarvitseman tilan;
• Leveyttä tai korkeutta ei voi asettaa (mutta reunus toimii).

Yleisiä esimerkkejä: <a>, <span>, <img>, <input>.

Inline-block-elementit

• Pysyvät rivillä, kuten teksti;
• Tukevat leveyttä, korkeutta, marginaalia, täytettä ja reunusta, kuten block-elementit.

Esimerkkejä: <button>, <select>, <textarea>.

Hyödyllisiä, kun elementtien halutaan olevan vierekkäin, mutta silti mahdollistavan täyden tyyliohjauksen.

Keskeiset erot