Lohko-, Inline- ja Inline-Block-Elementtien Ymmärtäminen
HTML-elementit voidaan luokitella inline- tai block-elementeiksi niiden käyttäytymisen perusteella.
- Inline-elementit pysyvät samalla rivillä muiden elementtien kanssa ja vievät vain tarvitsemansa leveyden. Esimerkkejä:
<a>,<span>,<img>,<input>; - Block-elementit alkavat uudelta riviltä ja vievät koko säiliön leveyden. Esimerkkejä:
<div>,<h1>–<h6>,<p>,<ul>,<li>.
Block-elementit
Block-elementit vievät koko säiliön leveyden ja alkavat aina uudelta riviltä. Niitä voidaan muotoilla CSS-ominaisuuksilla, kuten width, height, margin, padding ja border. Yleisiä block-elementtejä ovat esimerkiksi <div>, <p>, <ul> ja <li>.
index.html
index.css
Inline-elementit
Inline-elementit pysyvät samalla rivillä muiden elementtien kanssa ja vievät vain sisällön vaatiman leveyden. Toisin kuin block-elementeille, inline-elementeille ei voi määrittää width-, height-, margin- tai padding-arvoja, mutta border voidaan silti asettaa. Esimerkkejä inline-elementeistä ovat <a>, <span>, <img> ja <input>.
index.html
index.css
Inline-block-elementit
Inline-block-elementit eivät ala uudelta riviltä, mutta niissä yhdistyvät block-elementtien tyylinmuokkausmahdollisuudet. Niitä voidaan muokata CSS-ominaisuuksilla, kuten width, height, margin, padding ja border. Esimerkkejä inline-block-elementeistä ovat <button>, <select> ja <textarea>.
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
Awesome!
Completion rate improved to 2.56Lohko-, Inline- ja Inline-Block-Elementtien Ymmärtäminen
Pyyhkäise näyttääksesi valikon
HTML-elementit voidaan luokitella inline- tai block-elementeiksi niiden käyttäytymisen perusteella.
- Inline-elementit pysyvät samalla rivillä muiden elementtien kanssa ja vievät vain tarvitsemansa leveyden. Esimerkkejä:
<a>,<span>,<img>,<input>; - Block-elementit alkavat uudelta riviltä ja vievät koko säiliön leveyden. Esimerkkejä:
<div>,<h1>–<h6>,<p>,<ul>,<li>.
Block-elementit
Block-elementit vievät koko säiliön leveyden ja alkavat aina uudelta riviltä. Niitä voidaan muotoilla CSS-ominaisuuksilla, kuten width, height, margin, padding ja border. Yleisiä block-elementtejä ovat esimerkiksi <div>, <p>, <ul> ja <li>.
index.html
index.css
Inline-elementit
Inline-elementit pysyvät samalla rivillä muiden elementtien kanssa ja vievät vain sisällön vaatiman leveyden. Toisin kuin block-elementeille, inline-elementeille ei voi määrittää width-, height-, margin- tai padding-arvoja, mutta border voidaan silti asettaa. Esimerkkejä inline-elementeistä ovat <a>, <span>, <img> ja <input>.
index.html
index.css
Inline-block-elementit
Inline-block-elementit eivät ala uudelta riviltä, mutta niissä yhdistyvät block-elementtien tyylinmuokkausmahdollisuudet. Niitä voidaan muokata CSS-ominaisuuksilla, kuten width, height, margin, padding ja border. Esimerkkejä inline-block-elementeistä ovat <button>, <select> ja <textarea>.
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!
