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
Can you explain the main differences between inline, block, and inline-block elements?
Can you give more examples of each type of element?
How do I choose which type of element to use in my HTML?
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!
