Вградени елементи, уроци, WebReference
Вградените елементи са елементи, които са директно част от линия и имат свойството за показване, зададено на inline. Елементите, за които тази стойност е зададена по подразбиране, са , , и т.н., те се използват главно за промяна на външния вид на текста или неговия семантичен акцент.
Характеристики на вградените елементи
Изброяваме характерните черти на вградените елементи.
Свойствата, свързани с размерите (ширина, височина), не са приложими.
Вградените елементи се оразмеряват според тяхното съдържание и не могат да се променят директно чрез свойствата за ширина и височина, които съответно задават ширината и височината на елемента. Добавянето на тези свойства към вградени елементи просто се игнорира.
Размерът на елемент е равен на неговото съдържание плюс стойностите на полето, рамката и подложката.
Въпреки че не можете изрично да зададете размера на елемент, той може да бъде повлиян индиректно чрез свойствата margin, border и padding, чиито стойности се добавят към размера на съдържанието (Пример 1).
Пример 1: Размери на елемент
В този пример, вътре в блоковия елемент
добавен е вграден елемент и свойствата margin, padding и border вече са зададени за него. Това се прави така, че линията да е точно под текста (фиг. 1), а не по цялата дължина на блока, както би било, ако добавим граница за h1 директно.
Ориз. 1. Ред под текста
Едно нещо, което трябва да се отбележи, е, че за вградените елементи маржът работи само хоризонтално, а не вертикално. Така че свойствата margin-top и margin-bottom нямат ефект.
Спешните елементи се пренасят в друг ред, ако е необходимо.
Тъй като имаме работа с низове, текстът, разбира се, е обвит, така че целият низ да се побере вширина. Обвиването на текст обикновено се случва в бяло пространство и може да раздели нашия вграден елемент на две или повече части. Това не е проблем, докато елементът не е стилизиран. На фиг. 2 показва как фонът и рамката са разделени на две части.
Ориз. 2. Прекъсване на ред
За да предотвратите обвиването на текст вътре в елемент, добавете свойството white-space със стойността nowrap (пример 2).
Пример 2: Обвиване на редове
Обвиването на текста се брои за интервал.
В HTML кода всяко обвиване на текст се третира като празно пространство от браузъра и това се отнася и за поставянето на елементи на отделни редове. Сравнете двата параграфа в Пример 3. В първия параграф всеки е на отделен ред, а във втория параграф кодът е на непрекъснат ред без интервали или тирета.
Пример 3. Прекъсване, но нов ред
Резултатът от този пример е показан на фиг. 3. В първия ред има малко разстояние между цветните правоъгълници, а вторият ред изглежда плътен.
Ориз. 3. Разстояния между елементите
Ще се върнем към тази функция в inline-block елементи.
Можете да подравнявате вертикално със свойството vertical-align.
Свойството vertical-align подравнява елементите вертикално един спрямо друг, което ви позволява да правите горни и долни индекси, да задавате подравняване на съдържанието на клетките на таблицата, да задавате позицията на блокове и т.н. Пример 4 показва подравняването на изображения и текст в средата едно спрямо друго.
Пример 4 Използване на вертикално подравняване
Резултатът от този пример е показан на фиг. 4.
Ориз. 4. Подравняване на картини и текст
Преобразуване във вграден елемент
Вградените елементи могат да бъдат превърнати в блокови елементи, като се използва свойството display и неговитеблокови стойности. Възможно е също да се обърне действието чрез вградената стойност и преобразуването на блоковия елемент във вграден (пример 5).
Резултатът от този пример е показан на фиг. 5.
Ориз. 5. Вградени елементи
внимание! Създаването на вграден елемент не ви дава право да нарушавате структурата на HTML кода и реда на влагане на елементите.
Трябва да разберете, че HTML и CSS се проверяват независимо един от друг и каквито и манипулации да правите с елементи чрез стилове, това не засяга HTML. HTML кодът във всеки случай трябва да бъде правилен по отношение на HTML синтаксиса.