Блочная модель верстки HTML/CSS

блочная версткаПри верстке сайтов или различных правках уже готового кода, необходимо знать что такое блочная модель. Это обязательно для грамотной работы со связкой технологий HTML/CSS.

Часть HTML-элементов, которые можно найти в коде страницы являются блочными изначально. Это относится к тэгам <h1>-<h6>, <p>, <div>, <ol>, <ul>, <li>.

Остальные (например, <span>, <a>) можно сделать, и часто это просто необходимо в соответствии с поставленной задачей, блочными посредством средств CSS (имеется в виду свойство display). То есть работа с веб-страницей, это в основном работа с подобными элементами.

Все блочные элементы имеют одну и ту же структуру, которая представлена на рисунке ниже (немного похоже на хоккейные ворота).

блочная верстка

Каждый блок содержит в себе информационную часть (его содержание, контент). Это может быть изображение, текст или еще что-то. К примеру, для любого элемента <p> (тег абзаца) содержимым будет его текст.

Вокруг контента могут находиться (в том числе и с нулевыми значениями) еще 3 области. Это отступы (padding), граница (border) и поля (margin), которые задаются одноименными свойствами CSS.

Кроме того, они не входят в ширину (width) блока. Это очень важное замечание. Запомните его! Задавая ширину блочного элемента, мы задаем ширину только той его части, где содержится контент (только центрального прямоугольника на рисунке).

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

За отступами идет граница блока. Она имеет настраиваемые в CSS ширину, цвет, оформление.

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

В случае если вы немного запутались, небольшой пример

Допустим, вы хотите, чтобы правая и левая границы блока находились друг от друга на расстоянии 740px, а текст с обеих сторон не прижимался вплотную к границам, а имел промежутки по 20px.

В этом случае надо задать width 700px (не 740px), а левый и правый padding 20px.

700px + 20px + 20px = 740px.

Если border с обеих сторон, например, по 5px, то общая ширина всего блока, от границы до границы 740+5+5 = 750px.

Послесловие

Данная статья написана в рамках "гостевого поста" Михаилом, автором сайта thefamouspeople.ru. Спасибо ему за интересный и полезный материал.

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликован 1 комментарий
  1. Юджин Сварог (7 комм.):
    http://shiftoffproblem.com/

    Помнится было время, когда на собеседовании по соисканию должности программиста MVC я завалил вопросы по CSS, одним из которых было "чем отличается inline от blobk", было весьма прескорбно =) Сейчас это все позади, но уроки по CSS до сих пор считаю полезными не только для дизайнеров, но и для прогеров.
    Спасибо за урок по верстке

Не держи в себе. Выскажись.

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

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 12.44MB | MySQL:61 | 0,290sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html