CSS Блочные строчные элементы

В этой части учебника, будет рассказываться про блочно строчный элемент в CSS, да и вообще, про то как менять тип у элементов.

Как менять типы элементов в CSS:

Для начала надо рассмотреть как вообще менять тип у элементов, делается это очень просто, вам нужно использовать свойство display, вот не большой пример.

Тут мы используем внутри абзаца тег <span> и вы должны знать, что этот тег строчный, но сейчас благодаря CSS, сделаем его блочным.

Вот результат.

Как вы видите слово текст, который находился в строчном теги <span>, стал блочным, это понятно из ходя от  того, что слово перенеслось на другую строчку, потому что блочный тип занимает 100% ширины родительского элемента.

Блочно строчный элемент:

Теперь нужно объяснить что такое блочно строчный элемент в CSS и как с ними работать.

Что такое блочно строчный элемент:

Блочно строчный тип элемента в CSS, это когда элемент имеет свойства как блочного, так и строчного элемента.

Это нужно, что бы ставить несколько блоков в один ряд, раньше для этого использовались таблицы, что как вы понимаете не очень удобно в каком то смысле.

 Работа с блочно строчными элементами:

Теперь перейдём к самой работе, она достаточно простая, но по началу она не понятна, особенно для совсем новичков.

Для примера сделаем пять блоков, которые должны встать в один ряд.

То есть просто сделали внутри одного блока, пять других блоков, теперь перейдём к CSS.

Как видите, задаём размеры всем элементам и цвета, элемент в котором у нас будут хранится блоки в строчку, делаем красным цветам, а сами блоки зелёным, также им задаём левый внешний отступ, чтобы они не сливались и назначаем блочно строчный тип, вот результат.

блочно строчный элемент css

Как видите всё работает так, как вам надо.

Но вы можете заметить, что блок выравнивается по левому краю, а что если нужно выравнивать по правому краю, для этого есть свойство float в CSS, вот как с ним работать.

Мы добавили float: right и margin-top: 10px, что бы были верхние отступы, также margin-right, что бы справа был отступ, вот результат.

свойство float в css

Как видите всё работает так как надо.

Вывод:

В этой части учебника рассказывалось про блочно строчный тип элемента в CSS, и узнали про свойство float.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Дополнительно: