Ero lohkotason ja sisäisten elementtien välillä

HTML koostuu useista elementeistä, jotka toimivat verkkosivujen rakennuspalikoina. Kukin näistä elementeistä kuuluu kahteen luokkaan: lohkotason elementit tai inline-elementit. Näiden kahden tyyppisen elementin eron ymmärtäminen on tärkeä askel verkkosivujen luomisessa.

Estä tason elementit

Joten mikä on lohkotason elementti? Lohkotason elementti on HTML-elementti, joka aloittaa uuden rivin verkkosivulla ja pidentää sen pääelementin vapaan vaakatilan koko leveyden. Se luo suuria sisältölohkoja, kuten kappaleita tai sivujakoa. Itse asiassa useimmat HTML-elementit ovat lohkotason elementtejä.

Lohkotason elementtejä käytetään HTML-asiakirjan rungossa. Ne voivat sisältää inline-elementtejä sekä muita lohkotason elementtejä.

Sisäiset elementit

Toisin kuin lohkotason elementti, inline-elementti:

• Se voi alkaa linjan sisällä.
• Se ei aloita uutta linjaa.
• Sen leveys ulottuu vain siinä määrin kuin sen tunnisteet määrittelevät.

Esimerkki upotetusta elementistä on , joka tekee tekstisisällön fontin lihavoituna. Sisäinen elementti sisältää yleensä vain muita sisäisiä elementtejä tai se ei voi sisältää mitään, kuten

rikkoa tunniste.

HTML: ssä on myös kolmas tyyppinen elementti: ne, joita ei näytetä lainkaan. Nämä elementit tarjoavat tietoa sivusta, mutta eivät näy, kun ne renderoidaan verkkoselaimessa.

Esimerkiksi:

•  määrittelee metatiedot.
•  on HTML-dokumenttielementti, joka sisältää nämä elementit.

Sisä- ja estoelementtityyppien vaihtaminen

Voit muuttaa elementin tyypin rivistä lohkoon tai päinvastoin jollakin seuraavista CSS-ominaisuuksista:

• näyttö: lohko; 

• näyttö: inline; 

• näyttö: ei mitään;

CSS display-ominaisuuden avulla voit muuttaa sisäisen ominaisuuden estoksi tai lohkon riviksi tai ei näytetä ollenkaan.

Milloin näytön ominaisuutta vaihdetaan

Yleensä jätä näyttöominaisuus yksin, mutta joissakin tapauksissa inline- ja block-näytön ominaisuuksien vaihtaminen voi olla hyödyllistä.

• Vaakaluettelovalikot: Luettelot ovat lohkotason elementtejä, mutta jos haluat, että valikkosi näkyy vaakasuunnassa, sinun on muutettava luettelo sisäiseksi elementiksi, jotta kukin valikkokohta ei ala uudella rivillä.
• Otsikot tekstissä: Joskus saatat haluta, että otsikko jää tekstiin, mutta säilytä HTML-otsikon arvot. Muuttamalla h1 - h6-arvot inline-muotoon, sen lopputunnisteen jälkeen tuleva teksti jatkaa virtaamista sen vieressä samalla rivillä sen sijaan, että aloitettaisiin uudelta riviltä.
• Elementin poistaminen: Jos haluat poistaa elementin kokonaan asiakirjoista normaali virtaus, voit asettaa näytön asetukseksi

  ei mitään

  Yksi huomautus, ole varovainen, kun käytät näyttöä: ei mitään. Vaikka tämä tyyli tekee todellakin elementin näkymättömäksi, et koskaan halua käyttää tätä piilottaaksesi SEO-syistä lisäämäsi tekstin, mutta et halua näyttää sitä vierailijoille. Se on varma tapa saada sivustosi rankaisemaan mustahattuisen lähestymistavan hakukoneoptimointiin.

Yleiset sisäisen elementin muotoiluvirheet

Yksi yleisimmistä virheistä, joita tulokas tekee verkkosuunnittelussa, on yrittää asettaa leveys inline-elementille. Tämä ei toimi, koska säilytyslaatikko ei määritä sisäisten elementtien leveyksiä.

Inline-elementit jättävät huomiotta useita ominaisuuksia:

• leveys

  ja

  korkeus

• max-leveys

  ja

  max-korkeus

• min-leveys

  ja

  min-korkeus

Jos sinun on määritettävä leveys tai korkeus, jonka elementin tulisi käyttää, sinun kannattaa soveltaa sitä lohkotason elementtiin, joka sisältää tekstisi.