Разликите между блоковите и вградените елементи

HTML се състои от различни елементи, които действат като градивните елементи на уеб страниците. Всеки от тези елементи попада в една от двете категории: елементи на ниво блок или вграден елемент. Разбирането на разликата между тези два типа елементи е важна стъпка в изграждането на уеб страници.

Елементи на ниво блок

И така, какво е елемент на ниво блок? Елемент на ниво блок е HTML елемент, който започва нов ред на уеб страница и разширява цялата ширина на наличното хоризонтално пространство на своя родителски елемент. Той създава големи блокове съдържание като абзаци или разделения на страници. Всъщност повечето HTML елементи са елементи на ниво блок.

Елементите на ниво блок се използват в тялото на HTML документа. Те могат да съдържат вградени елементи, както и други елементи на ниво блок.

Вградени елементи

За разлика от елемент на ниво блок, вграден елемент:

• Може да започне в рамките на линия.
• Не започва нов ред.
• Ширината му се простира само доколкото е определена от неговите тагове.

Пример за вграден елемент е , което прави шрифта на текстовото съдържание, съдържащ се в получер шрифт. Вграденият елемент обикновено съдържа само други вградени елементи или може да не съдържа изобщо нищо, като например
етикет за прекъсване.

В HTML има и трети тип елемент: тези, които изобщо не се показват. Тези елементи предоставят информация за страницата, но не се показват, когато се показват в уеб браузър.

Например:

•  дефинира мета данни.
•  е елементът на HTML документ, който съдържа тези елементи.

Превключване на вградени и блокови типове елементи

Можете да промените типа на елемента от вграден в блокиран или обратно, като използвате едно от следните CSS свойства:

• дисплей: блок; 

• дисплей: вграден; 

• дисплей: няма;

The CSS display свойството ви позволява да промените вградено свойство, което да блокирате, или блок, вградено, или да не се показва изобщо.

Кога да промените свойството на дисплея

Като цяло оставете свойството display на мира, но има някои случаи, при които размяната на вградени и блокирани свойства на дисплея може да бъде полезна.

• Менюта на хоризонтален списък: Списъците са елементи на ниво блок, но ако искате менюто ви да се показва хоризонтално, трябва да конвертирате списъка в вграден елемент, така че всеки елемент от менюто да не започва на нов ред.
• Заглавки в текста: Понякога може да искате заглавката да остане в текста, но да поддържате стойностите на заглавката на HTML. Промяната на стойностите h1 до h6 на вградени ще позволи на текста, който идва след затварящия си маркер, да продължи да тече до него на същия ред, вместо да започва на нов ред.
• Премахване на елемента: Ако искате да премахнете елемент напълно от документа нормален поток, можете да настроите дисплея на

  нито един

  Една бележка, бъдете внимателни, когато използвате дисплей: няма. Въпреки че този стил наистина ще направи елемент невидим, вие никога не искате да използвате това, за да скриете текст, който сте добавили поради SEO причини, но не искате да се показва за посетителите. Това е сигурен начин да накажете вашия сайт да бъде наказан за подход с черна шапка към SEO.

Често срещани грешки при форматирането на вградени елементи

Една от най-често срещаните грешки, които допуска новак в уеб дизайна, е опит да зададе ширина на вграден елемент. Това не работи, тъй като ширината на вградените елементи не се дефинира от полето на контейнера.

Вградените елементи игнорират няколко свойства:

• ширина

  и

  височина

• максимална ширина

  и

  максимална височина

• мин. ширина

  и

  мин-височина

Ако трябва да определите ширината или височината, които даден елемент трябва да поеме, ще искате да приложите това към елемента на ниво блок, съдържащ вашия вграден текст.