блочные-и-строчные-элементы-в-css

Как вы знаете, каскадные таблицы стилей построены на блочной модели. Буквально все элементы веб-страницы представляют из себя прямоугольные блоки.

Однако, практикуясь в верстке сайтов вы наверняка могли заметить тот факт, что не все блоки ведут себя одинаково. Различия заключается как в отображении на веб-странице, так и в тонкостях форматирования.

А причина в том, что все элементы веб-страницы относятся к одной из двух групп:

  • Блочные (div, blockquote, form и т.д.)
  • Строчные (a, strong, em, input и т.д.)

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

Блочные элементы

Например, возьмем тег div. Его можно окружить по бокам двумя абзацами, однако, каждая из них будет находиться сверху и снизу блочного элемента. То есть, тег div займет собой всю ширину экрана.

блочный-элемент

Также одно из преимуществ блочных элементов - возможность задавать внутренние и внешние отступы. Этих свойств строчные элементы лишены.

Другая отличительная черта блочных элементов - возможность определять для них ширину и высоту. В то время как размеры строчных элементов формируются в основном в зависимости от их содержимого.

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

Строчные элементы

Строчные элементы в отличие от блочных не занимают всю ширину экрана. Например, слово, окруженное в тег <a>. Для создания ссылки в тексте необязательно выводить ее в отдельную строку, так ведь?

Таким же образом обстоят дела с другими строчными элементами - strong, em, input, span, textarea и прочие. Также у нас нет возможности задать ширину и высоту этим элементам (width, height). Подобная ситуация обстоит и с внутренними и внешними отступами (margin, padding).

Однако, есть очень интересный факт - строчным элементам можно задать внутренние и внешние отступы по бокам. Вроде бы данное явление кажется довольно странным, но это не так.

Дело в том, что отступ по бокам строчного элемента способно лишь отодвинуть на некоторое расстояние другие строчные элементы. Однако, если такое же будет возможно сверху и снизу - все строки начнут сыпаться. То есть, вся веб-страница придет в упадок. Вот как выглядит на практике задание отступов строчному элементу (ссылка с красной рамкой):

padding-для-ссылки

Как видите, в понимании блочных и строчных элементов нет ничего сложного. Также хочу отметить, что порой может возникать необходимость в отображении блочных элементов в виде строчных и наоборот. К счастью, в CSS есть такая возможность. Однако, это - тема следующего урока по каскадным таблицам стилей.

А на этом у меня все. Надеюсь, данный урок по CSS был для вас полезен. Если это так:

  1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
  2. Подписывайтесь на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

2 Comments

  1. Хороший урок по CSS. Можно сказать фундаментальный. Сам юзаю каскадные таблицы и знаю какая эта мощь. Верстаешь что хочешь и как хочешь. Кстати, все уроки по CSS на вашем блоге очень подробны и полезны. Только хотелось бы почаще выход уроков. А так, спасибо.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Вы можете использовать следующие теги HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

восемнадцать + двенадцать =

Закрыть