A blokkszintű és az inline elemek közötti különbségek

HTML különféle elemekből áll, amelyek a weboldalak építőelemeként működnek. Ezen elemek mindegyike a két kategória egyikébe tartozik: blokkszintű elemek vagy inline elemek. A két típusú elem közötti különbség megértése fontos lépés a weboldalak felépítésében.

Blokk szintű elemek

Mi tehát a blokk szintű elem? A blokkszintű elem egy HTML-elem, amely új sort kezd a weboldalon, és kiterjeszti a szülőelem elérhető vízszintes terének teljes szélességét. Nagy tartalomtömböket hoz létre, például bekezdések vagy oldalfelosztások. Valójában a legtöbb HTML elem blokk szintű elem.

A HTML-dokumentum törzsében blokkszintű elemeket használnak. Tartalmazhatnak inline elemeket, valamint egyéb blokkszintű elemeket.

Beépített elemek

A blokk szintű elemekkel ellentétben egy soros elem:

• Soron belül kezdődhet.
• Nem indul új vonal.
• Szélessége csak addig terjed, amíg a címkék meghatározzák.

Az inline elemre példa a , amely a szöveg betűtípusát félkövéren tartalmazza. Az inline elem általában csak más inline elemeket tartalmaz, vagy egyáltalán nem tartalmazhat semmit, például az
break tag.

Van egy harmadik típusú elem is a HTML-ben: azok, amelyek egyáltalán nem jelennek meg. Ezek az elemek információt nyújtanak az oldalról, de nem jelennek meg, ha webböngészőben renderelik.

Például:

•  meghatározza a metaadatokat.
•  a HTML dokumentum elem, amely ezeket az elemeket tárolja.

Inline és Block elemtípusok váltása

Megváltoztathatja az elem típusát sorosról blokkra, vagy fordítva, az alábbi CSS tulajdonságok egyikével:

• kijelző: blokk; 

• kijelző: sorban; 

• kijelző: nincs;

A CSS A display tulajdonság lehetővé teszi, hogy egy soron belüli tulajdonságot blokkra, vagy egy blokkot sorosra vagy hogy ne jelenjen meg egyáltalán.

Mikor kell megváltoztatni a megjelenítési tulajdonságot

Általában hagyja békén a megjelenítési tulajdonságot, de vannak olyan esetek, amikor az inline és a block display tulajdonságok cseréje hasznos lehet.

• Vízszintes lista menük: A listák blokkszintű elemek, de ha azt szeretné, hogy a menü vízszintesen jelenjen meg, akkor át kell alakítania a listát inline elemre, hogy az egyes menüpontok ne egy új sorban kezdődjenek.
• Fejlécek a szövegben: Előfordulhat, hogy szeretné, ha a fejléc megmaradna a szövegben, de fenntartja a HTML fejléc értékeit. A h1 és h6 közötti érték inline-ra változtatása lehetővé teszi, hogy a záró címke után érkező szöveg továbbra is ugyanabban a sorban haladjon mellette, ahelyett, hogy új sorból indulna.
• Az elem eltávolítása: Ha egy elemet teljesen el akar távolítani a dokumentumból normális áramlás, beállíthatja a kijelzőt

  egyik sem

  Egy megjegyzés, legyen óvatos a kijelző használata közben: nincs. Noha ez a stílus valóban láthatatlanná tesz egy elemet, soha nem akarja ezt elrejteni a SEO-okból hozzáadott szöveg elrejtése érdekében, de nem szeretné megjeleníteni a látogatók számára. Ez egy biztos módja annak, hogy webhelyét megbüntessék a fekete kalapos SEO-megközelítés miatt.

Gyakori inline elem formázási hibák

Az egyik leggyakoribb hiba, amelyet a webdesign újonc elkövet, az, hogy megpróbál szélességet beállítani az inline elemre. Ez nem működik, mert a tároló doboz nem határozza meg az inline elemek szélességét.

Az inline elemek figyelmen kívül hagynak több tulajdonságot:

• szélesség

  és

  magasság

• max szélesség

  és

  maximum magasság

• min-szélesség

  és

  min-magasság

Ha meg kell határoznia azt a szélességet vagy magasságot, amelyet egy elemnek el kell töltenie, akkor azt alkalmazni kell a blokk szintű elemre, amely tartalmazza az inline szöveget.