Lohko-, Inline- ja Inline-Block-Elementtien Ymmärtäminen
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>.
index.html
index.css
Inline-elementit
- Pysyvät samalla rivillä;
- Vievät vain sisältönsä vaatiman tilan;
- Leveyttä tai korkeutta ei voi asettaa (mutta reunus toimii).
Yleisiä esimerkkejä: <a>, <span>, <img>, <input>.
index.html
index.css
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 tyylin hallinta halutaan säilyttää.
index.html
index.css
1. Mikä on tärkein ero lohko- ja rivinsisäisten elementtien välillä?
2. Mikä seuraavista on esimerkki lohkoelementistä?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Mahtavaa!
Completion arvosana parantunut arvoon 2.56Lohko-, Inline- ja Inline-Block-Elementtien Ymmärtäminen
Pyyhkäise näyttääksesi valikon
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>.
index.html
index.css
Inline-elementit
- Pysyvät samalla rivillä;
- Vievät vain sisältönsä vaatiman tilan;
- Leveyttä tai korkeutta ei voi asettaa (mutta reunus toimii).
Yleisiä esimerkkejä: <a>, <span>, <img>, <input>.
index.html
index.css
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 tyylin hallinta halutaan säilyttää.
index.html
index.css
1. Mikä on tärkein ero lohko- ja rivinsisäisten elementtien välillä?
2. Mikä seuraavista on esimerkki lohkoelementistä?
Kiitos palautteestasi!
