Блочная модель в CSS


Содержание

Седьмой урок. Блочная модель CSS

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

В блоковую модель входят css-свойства блока:

  • width — ширина
  • height — высота
  • padding — внутренний отступ
  • margin — внешний отступ
  • border — граница

Режим блоковой модели задаётся через свойство box-sizing. Если оно равно content-box , то это стандартное («старое») поведение, если border-box , то это «новое» поведение.

В стандартном варианте реальная ширина и высота блока определяется суммой свойств width/height, padding, margin и border. То есть задавая width: 300px; padding: 20px; , в реальности размер блока будет не 300px, а 340px. Вот примерная схема

Главная проблема такой модели в том, что размеры часто нужно задавать в процентах, где неизвестна точная ширина в пикселах. Если, например нужно разместить два блока рядом по 50% с промежутком между ними, то верстальщику приходится расчитывать значения ширины, отступов и бордюра в пикселах, чтобы не превысить максимальные 100%.

В новом варианте блочной модели ширина блока задается через width , а отступы и границы образуются уже «внутрь» блока, не увеличивая реальную ширину. При этом margin задаёт непосредственно внешний отступ, не увеличивая ширину блока:

Почти вся современная верстка выполняется в новой модели border-box. Именно поэтому в прошлом уроке мы задали сброс «border-box».

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

В HTML все тэги выводятся в обычном потоке — сверху вниз, как они заданы в коде. Когда стоит задача позиционирования блоков, то этот поток следует изменить. Делается это через css-свойство display . Мы уже знаем, что тэги бывают блочные и строчные, но на самом деле возможных значений больше и все они определяются свойством display, где описаны достаточно сложные варианты для table, flex или grid (самое новое свойство).

Раньше в CSS не было таких возможностей, поэтому была придумана верстка через свойство float . Изначально float (у него два значения left и right) был предназначен для размещения изображения так, чтобы текст его обтекал.

Свойство float выводит элемент из общего потока, что позволяет размещать блоковые элементы (например DIV) рядом друг с другом. Главное правило — у таких элементов должен быть общий контейнер. Рассмотрим несколько примеров.

Разместим два div-блока рядом.

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

Попробуем изменить ширину блоков так, чтобы суммарно они вышли за пределы 100%, например 3 блока по 40%.

Тот блок, которому не хватило места, автоматически будет переноситься на новую строчку. Это одна из особенностей поведения float, которую следует учитывать.

Для того, чтобы принудительно прекратить обтекание, используется css-свойство clear: both; . Но из-за особенностей его поведения, более распространено использование специального класса .clearfix (в css-фреймворках). Он применяется к основному контейнеру, после которого float перестанет работать. Классы UniCSS мы рассмотрим позже, пока просто покажу пример того как это выглядит на странице.

Видно, что float-элемент вышел за пределы контейнера. Это его типовое поведение. Добавим класс .clearfix :

Несколько лет назад для верстки колонок и модульной сетки сайта использовалась именно float-модель. На сегодняшний день она перестала быть актуальной, но вы можете встретить в Сети очень много её примеров использования. С моей точки зрения, для верстки колонок лучше использовать специально предназначенную для этого flex-модель и не забивать себе голову устаревшими float-хитростями.

Более того, современная верстка постепенно переходит на grid-модель, которая предлагает ещё больше возможностей. С учётом темпа развития браузеров, в ближайшее время она станет уже привычной практикой.

Задания

1. Отредактируйте файлы предыдущего урока так, чтобы изображения получили float-свойства.

2. Сделайте к текстам несколько плавающих врезок с текстом. Для задания css используйте атрибут тэгов style.

3. Используйте в текстах свойства padding и margin.

4. Научитесь задавать цветной фон блока через свойства background.

Блочная модель CSS

Блочная модель — это способ отображения элементов браузерами, которые обрабатывают все теги как небольшие прямоугольные блоки. Для браузеров любой тег — это контейнер с содержимым: текстом, изображениями, другими тегами и т.д.

    Margin (внешний отступ) — это пустое пространство (поле), которое отделяет один элемент от другого или от края области просмотра окна браузера. Самый простой пример внешнего отступа — это промежуток между абзацами, идущими друг за другом.

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

Border (рамка элемента) — это граница с любой стороны элемента. Рамка может быть установлена как со всех сторон элемента, так и с одной стороны.

Используя рамку можно просто красиво оформить элемент или визуально отделить содержимое текущего элемента от других элементов страницы.

Padding (внутренний отступ) — это пустое пространство между содержимым элемента и его рамкой.

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

  • У большинства элементов есть область содержимого, в которой располагается все содержимое элемента (текст, вставляемые изображения или вложенные (дочерние) элементы).
  • WEBTEORETIK

    Когда человеку тяжело,
    это часто означает,
    что он идёт к успеху.

    • Главная
    • >>
    • Раздел >>Уроки CSS
    • >>
    • Материал >>
    • Блочные модели в CSS.

    Блочные модели в CSS.

    Категория: Уроки CSS Просмотров: 857 Коментариев: Дата: 2020-04-01 Добавил: admin

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

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

    Для примера: создадим заголовок первого уровня H1, обычный список и простой параграф абзац (параграф) p

    И для всех этих элементов зададим рамку (как создавать рамку в CSS можно посмотреть тут).

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

    Такой блок содержит в себе следующее: это Содержимое — там где находится текст блока, Внутренний отступ — который задается с помощью свойства — padding. Рамка — задается с помощью уже знакомого нам свойства border, толщина рамки может манятся от 1-го px и до того который нужен, и Внешний отступ или внешнее поле — задается с помощью свойства — margin.

    Вот такую структуру и имеет каждый нами созданный блок. Если Вы обратили внимание на пример, который мы создали ранее то заметили, что во всех этих блоках имеются все эти отступы и свойства которые мы рассмотрели только что. Эти отступы и поля изначально задаются браузером в какое-то определенное значение в размере нескольких пикселей. Зачастую работая с элементами эти отступы и поля сильно мешают, и их приходится сбрасывать в ноль. Как это делается?

    Для каждого элементам мы зададим следующие свойства: margin: 0; и padding: 0;. В результате для наших элементов будут заданы следующие слили.

    В итоге мы видим, что вся наша структура приподнялась выше и прилипла в плотную к верхней части браузера. Это и связанно с тем, что мы занулили внешние поле у заголовка H1 .

    ВАЖНО: Свойства margin и padding которые мы задали для наших элементов не могут быть унаследованы другими элементами. Эти свойства не наследуются и действуют только на те элементы, для которых их задали.

    Используя свойства margin и padding можно не только убрать отступы и поля, а и наоборот задать их в нужное нам значение. Например:

    В этом случае мы увидим, что все наши элементы получили отступ и поле по 30 пикселей как справа и слева, так и сверху и снизу. В данном примере мы задавали отступы и поля сразу для четырех сторон. Однако у нас есть возможность задать нужное значение и для одной определенной стороны. Для этого, к нашему свойству, через тире, добавляется сторона, с которой делать отступ или поле: margin-left и padding-right. В данном случае будут заданы значения для поля слева и для отступа справа.

    Точно также можно задать отступы и поля сверху и снизу: margin-top и padding-bottom, и тогда наш элемент получит поле сверху и отступ снизу. Так для любого элемента Вы можете задать нужный отступ или поле с нужной стороны.

    По отдельности задавать значение нам понятно как, но бывают случаи, когда нужно задать отступ или поле сразу для четырех сторон и все эти значения разные. Как тогда нам поступать в данном случае? Мы можем задать значения по отдельности для каждой стороны нужное значение, но это не совсем верно, так как это удлиняет запись кода и увеличивает размер файла. Для таких случаев есть короткая запись, где мы указываем margin или padding , и указываем ему, через пробел, все четыре нам нужных значения, ориентируясь на часовую стрелку. Так, как это показано на картинке выше. Мы указываем сначала значение “сверху” top, затем “справа” right, потом “снизу” bottom и в конце “слева” left. Получим запись следующего вида.

    Илон Маск рекомендует:  Программируем перетаскивание(Drag and Drop) на JavaScript

    Где мы задали сверху 30px справа 20px снизу 10px и слева 5px. Этот вариант записи мы рассмотрели, но есть случаи, когда у нас значения сверху и снизу одинаковы и/или справа и слева также одинаковы.

    В таком случае нам достаточно указать всего два значения margin: 20px 40px; или padding: 20px 40px;. В этом случае, если браузер видит только два значения, то он их интерпретирует следующим образом: надо верхний и нижний отступы или поля задать размером в 20px, а правый и левый отступы или поля задать размером 20px.

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

    Блоковая модель

    Все элементы в CSS являются прямоугольными блоками. Каждый такой блок имеет зону content, в которой располагается содержимое элемента (т.е. текст, изображения и т.д.). Вокруг зоны content могут располагаться необязательные зоны: padding, border и margin.

    Зона padding окружает зону content. Данная зона используется для задания величины отступа содержимого элемента (зона content) от его границы (зона border). Зона может быть разбита на четыре части, которые могут оформляться независимо от друг друга: padding-top, padding-right, padding-bottom, padding-left.

    Зона border окружает зону padding. Данная зона позволяет задать элементу границу произвольной ширины, стиля и цвета. Зона может быть разбита на: border-top, border-right, border-bottom, border-left.

    Зона margin окружает зону border. Данная зона позволяет задать величину внешнего отступа данного элемента от окружающих. Зона может быть разбита на: margin-top, margin-right, margin-bottom, margin-left.

    Глава 1: Блочная модель документа

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

    Консультация по телефону 8 800 555-86-28 .

    Курсы

    Профессии

    Информация

    Услуги

    Остальное

    Регистрация

    Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

    Восстановление доступа

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

    Забыли привязать эл. почту к профилю? Напишите нам, мы поможем.

    Управление блочной моделью CSS

    Дата публикации: 2020-04-27

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

    Создается бокс или нет, а также тип этого бокса зависит от языка разметки. CSS спроектирован как способ стилизации HTML-документов, поэтому модель визуального рендеринга CSS в значительной степени корениться в различиях между блочными и инлайновыми элементами в HTML. По умолчанию элементы p и section создают боксы блочного уровня, а теги a, span и em создают инлайновые боксы. SVG вообще не использует блоковую модель, поэтому большая часть макетных свойств CSS не работает с SVG.

    Боксы блочного уровня создают новые блоки контента, как видно на Рисунке 4.1. Блочные боксы рендерятся вертикально в исходном порядке и заполняют (кроме таблиц) всю ширину контейнера. Это обычное отображение значений block, list-item, table и других table-* значений (например, table-cell).

    Рисунок 4.1. боксы блочного уровня в тегах h1, p, ul и table внутри контейнера (серая область)

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Боксы инлайнового уровня не формируют новые блоки контента. Эти боксы создают строки внутри блочного бокса. Они отображаются горизонтально и заполняют ширину бокса-контейнера, перепрыгивая на новые строки по необходимости, как показано на Рисунке 4.2. К боксам инлайнового уровня относятся значения свойства display inline, inline-block, inline-table и ruby.

    Рисунок 4.2. пример инлайнового бокса с margin: 1em и padding: 5px

    Но как же рассчитываются размеры бокса? Вот тут все немного сложнее. На Рисунке 4.3 видно, что размеры бокса складываются из контентной области, padding’а и ширины, плюс ширина рамки, как определено в CSS2. Ширина margin’а создает на элементе margin-бокс и влияет на другие элементы в документе, но никак не воздействует на размеры самого бокса.

    Рисунок 4.3. блоковая модель по CSS 2.1

    Например, тег p с width: 300px, padding: 20px и border: 10px будет иметь вычисленную ширину в 360px. Ширина складывается из ширины параграфа, левого и правого паддинга, а также из левого и правого border-width. Чтобы общая ширина элемента была 300px, при этом сохраняя 20px паддинга и 10 пикселей рамки, необходимо задать width: 240px. Большинство браузеров вычисляют ширину именно таким образом. Но это не относится к IE 5.5.

    IE 5.5 использует свойство width, как окончательное значение для размеров бокса, загоняя паддинг и рамку внутрь бокса, как показано на Рисунке 4.4. Оба значения вычитаются из width, уменьшая размер контентной области. Многие программисты считают такой подход более разумным, несмотря на то, что он работает не по спецификации.

    Рисунок 4.4 блоковая модель в CSS 2.1 и блоковая модель в старом IE 5.5

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

    Выбор блоковой модели с помощью свойства box-sizing

    Свойство box-sizing определено в спецификации CSS Basic User Interface Module Level 3 и принимает два возможных значения: content-box и border-box.

    По умолчанию установлено значение content-box. С этим значением свойства width и height влияют на размер контентной области, что совпадает с поведением, описанным в спецификации CSS 2.1. Такое поведение установлено по умолчанию в современных браузерах (как показано на Рисунке 4.4).

    Значение border-box добавляет немного магии. Свойства width и height начинают применяться к внешней границе рамки, а не к контентной области. Рамка и паддинг рисуются внутри бокса элемента, что совпадает со старым поведением в IE 5.5. Давайте разберем пример, в котором ширина в процентах совмещена с px на паддинге и рамке:

    CSS/Блочная Модель

    Содержание

    Типы элементов (свойство display ) [ править ]

    Свойство display определяет поведение элемента в документе.

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

    • block — блочный элемент (значение по умолчанию в CSS1) (CSS1)
    • inline — строчный элемент (значение по умолчанию в CSS2/CSS2.1 и выше) (CSS1)
    • list-item — блочный элемент с маркером списка (CSS1)
    • none — элемент удаляется из потока документа без сохранения места (CSS1)
    • inline-block — блочный элемент с поведением, аналогичным строчному (CSS2.1)
    • table — блочная таблица (table) (CSS2)
    • inline-table — строчная таблица (table) (CSS2)
    • table-row — строка таблицы (tr) (CSS2)
    • table-cell — ячейка таблицы (td, th) (CSS2)
    • table-caption — заголовок таблицы (caption) (CSS2)
    • table-column — колонка таблицы (col) (CSS2)
    • table-column-group — группа колонок (colgroup) (CSS2)
    • table-header-group — верхняя часть таблицы (шапка) (thead) (CSS2)
    • table-row-group — тело таблицы (tbody) (CSS2)
    • table-footer-group — нижняя часть таблицы (подвал) (tfoot) (CSS2)

    В скобках для табличных значений этого свойства указаны html-элементы с аналогичным поведением.

    Рядом с каждым значением указана версия CSS, когда оно появилось впервые.

    Блочная модель (Box model) [ править ]

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

    • content — содержимое блока, информация;
    • padding — внутренний отступ;
    • border и outline — граница и внешняя граница; (второе свойство не участвует в формировании размеров блока)
    • margin — внешний отступ;
    • height и width — высота и ширина элемента.

    В IE4 и IE5 высота и ширина блока формируются с учётом padding и border .

    В IE6 в режиме совместимости (quirks mode) также.

    Согласно спецификации W3C CSS высота и ширина определяются исключительно содержимым без учёта других свойств.

    На следующем рисунке сравниваются блочные модели W3C и IE4/IE5:

    В CSS3 появилось свойство box-sizing для поддержки блочной модели IE4/IE5.

    В следующих разделах будет более подробное описание свойств с примерами.

    Высота ( height ) и ширина ( width ) элемента [ править ]

    • height — высота;
    • min-height — минимальная высота;
    • max-height — максимальная высота;
    • width — ширина;

    • min-width — минимальная ширина;
    • max-width — максимальная ширина.

    Эти свойства могут задаваться в различных единицах CSS.

    Для минимальных и максимальных величин значение по умолчанию none , то есть без ограничений, а для обычных величин — auto , то есть рассчитывается автоматически. Отрицательные значения для всех этих свойств запрещены.

    В этом примере ширина сайта 960px, а максимальная ширина абзаца не больше 60% ширины сайта.

    Внутренние ( padding ) и внешние ( margin ) отступы [ править ]

    Свойство padding определяет расстояние от содержимого блока до его границы, а margin — расстояние между границами соседних элементов.

    На внутренние отступы распространяется фоновый цвет элемента, а на внешние — нет. Внешние отступы обладают таким эффектом как схлопывание, то есть объединение значений. Внутренние и внешние отступы можно задавать либо в сокращённой форме, либо для каждой из сторон отдельно. Значения для внешних отступов могут быть отрицательными, а для внутренних — нет.

    • padding/margin-top — верхний отступ (внутренний/внешний)
    • padding/margin-right — правый отступ (внутренний/внешний)
    • padding/margin-bottom — нижний отступ (внутренний/внешний)
    • padding/margin-left — левый отступ (внутренний/внешний)
    • padding/margin — отступ (внутренний/внешний) (сокращённая форма)
    Илон Маск рекомендует:  Что такое код pdf_setrgbcolor_fill

    Границы ( border/outline ) элемента [ править ]

    Границы позволяют визуально отделить один элемент от другого.

    Свойство border-color позволяет задать цвет границы, border-style — её стиль и border-width — толщину.

    Можно задать все эти три свойства в сокращённой форме, перечислив их через пробел в свойстве border .

    Или указать для каждой из сторон ( border-top , border-right , border-bottom , border-left ) необходимые свойства отдельно.

    Свойство outline позволяет задавать цвет ( outline-color ), стиль ( outline-style ) и толщину ( outline-width ) внешней границы только для всех сторон одновременно. И это свойство не участвует в формировании размеров блока.

    В сокращённой форме свойства внешней границы записываются через пробел в свойстве outline .

    Значения цвета указываются с помощью одного из стандартных способов.

    • none (CSS1)
    • hidden (CSS2/CSS2.1)
    • dotted (CSS1)
    • dashed (CSS1)
    • solid (CSS1)
    • double (CSS1)
    • groove (CSS1)
    • ridge (CSS1)
    • inset (CSS1)
    • outset (CSS1)
    • border-width

    Значения этого свойства указываются либо с помощью неотрицательных значений, либо с помощью ключевых слов thin, medium, thick (третье значение больше).

    • border-top
    • border-right
    • border-bottom
    • border-left
    • border-top-color/style/width
    • border-right-color/style/width
    • border-bottom-color/style/width
    • border-left-color/style/width
    • outline
    • outline-color
    • outline-style
    • outline-width

    Значения для последних четырёх свойств аналогичны значениям для border , кроме свойства outline-style , которое не поддерживает значение hidden.

    Сокращённая запись свойств [ править ]

    Для сокращённых свойств padding , margin , border-color/style/width используется мнемоническое правило TRouBLe от английских названий сторон (top/right/bottom/left, то есть верх/право/низ/лево).

    В этом примере значения свойства определяют стороны следующим образом:

    4 значения: T+R+B+L;

    3 значения: T+RL+B;

    2 значения: TB+RL;

    1 значение: TRBL.

    Для сокращённых свойств ( border , border-top/right/bottom/left , outline ) их значения записываются через пробел.

    Для других свойств смотрите сокращённые свойства.

    Свойство box-sizing [ править ]

    Это свойство впервые появилось в CSS3.

    Оно позволяет переключаться с блочной модели W3C на блочную модель IE4/IE5.

    • content-box — это значение используется по умолчанию и позволяет задавать размеры блока согласно спецификации, то есть только на основе ширины и высоты содержимого (content)
    • border-box — это блочная модель IE4/IE5, то есть размеры блока задаются с учётом внутреннего отступа и границы (content + padding + border)
    • padding-box — это значение появилось позже и позволяет задавать размеры с учётом контента и внутреннего отступа (content + padding)

    Последнее значение поддерживается только Mozilla Firefox.

    Всё, что вам нужно знать про CSS Margin

    Одним из первых, что многие из нас усвоили, когда изучали CSS, были особенности разных составляющих блока в CSS, описываемые как «Блочная Модель CSS». Один из элементов в блочной модели — margin (внешний отступ), прозрачная область вокруг блока, которая отталкивает другие элементы от содержимого данного блока. Свойства margin-top , margin-right , margin-bottom и margin-left были описаны еще в CSS1, вместе с сокращенным свойством margin для одновременной установки в всех четырёх свойств.

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

    Блочная модель CSS

    Как и во всех статьях про составляющие Блочной Модели CSS, мы должны определить, что подразумеваем под этим, и как модель классифицировалась в разных версиях CSS. Блочная модель относится к тому, как разные составляющие блока — content (содержимое), padding (внутренние отступы), border (рамка) и margin (внешние отступы) — расположены и взаимодействуют друг с другом. В CSS1, Блочная модель была изображена с помощью ASCII-диаграммы, показанной на картинке ниже

    Все четыре свойства для каждой стороны блока и сокращенное свойство margin были определены в CSS1.

    Спецификация CSS2.1 имеет иллюстрацию для демонстрации блочной модели и также определяет термины, которые мы продолжаем использовать для описания разных блоков. Спецификация описывает content box, padding box, border box, и margin box, каждый из которых определяется границами content, padding, border и margin соответственно.

    В данный момент существует спецификация Блочной Модели 3 версии в качестве рабочего проекта. При определении Блочной Модели и margins, она возвращает нас к CSS2, поэтому на протяжении статьи мы будем использовать определение из CSS2.

    Схлопывание margin

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

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

    Margin схлопываются в следующих ситуациях:

    • Смежные сестринские элементы (имеющие одного родителя)
    • Пустые блоки
    • Родитель и первый/последний дочерний элемент

    Смежные сестринские элементы

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

    В CodePen-примере ниже представлены три div элемента. У первого элемента верхний и нижний margin равны 50px, у второго — 20px, у третьего — 3em. Margin между двумя первыми элементами получается 50px, так как меньший margin нижнего элемента поглощается большим margin верхнего элемента. Margin между вторыми двумя элементами получается 3em, так как 3em больше, чем 20 пикселей у нижнего margin второго элемента.

    Пустые блоки

    Если блок пустой, его верхний и нижний margin могут схлопываться друг с другом. В следующем CodePen-примере второй элемент с классом empty (не виден, так как пустой) имеет верхний и нижний margin по 50px, однако, пространство между первым и третьим элементами не 100 пикселей, а 50. Это является следствием схлопывания двух margin.

    Добавление чего-либо в блок (даже внутренних отступов — padding) приведет к тому, что верхний и нижний margin будут использоваться, а не схлопываться.

    Родитель и первый/последний дочерний элемент

    Этот сценарий схлопывания margin озадачивает людей чаще, чем другие, так как он не понятен интуитивно. В следующем CodePen у нас есть div с классом wrapper (обертка), и я задала этому div свойство outline красного цвета, чтобы было видно, его границы. Все три дочерних элемента имеют margin по 50 пикселей. Тем не менее, первый и последний элементы примыкают к границам элемента-обертки; нет отступа в 50 пикселей между элементом и оберткой.

    Это происходит потому, что margin дочернего элемента схлопывается с любым margin родителя таким образом, что заканчивается за пределами родителя. Вы можете увидеть это, если проверите дочерний элемент с помощью браузерной панели разработчика. Подсвеченная желтым область — это margin.

    Схлопываются только margin

    Последний пример также подчеркивает кое-что про схлопывание margin. В CSS2 только вертикальные (верхний и нижний) margin были рассчитаны на схлопывание. Поэтому на примере выше margin слева и справа не схлопываются и заканчиваются внутри обертки.

    Примечание: Стоит запомнить, что margin схлопываются только в направлении блока, например между параграфами.

    Предотвращение схлопывания

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

    Схлопывание margin не происходит в ситуации, когда что-то находится между ними.

    Например, верхний и нижний margin пустого блока не схлопываются, если блоку задана рамка (border) или внутренние отступы (padding). В примере ниже я добавила блоку padding размером 1px. Теперь сверху и снизу блока есть margin по 50px.

    В этом есть логика: если пустой блок не имеет border или padding, он становится фактически невидимым. Например, это может быть пустой параграф, помещенный в разметку вашей CMS. Если бы ваша CMS добавляла лишние элементы параграфов, вы, вероятно, не хотели бы, чтобы они вызывали большие отступы между другими параграфами из-за того, что их margin учитываются. Добавьте что-нибудь в блок и получите эти отступы.

    Похожее поведение можно увидеть с margin первого или последнего дочернего элемента, margin которого выходит за пределы родителя. Если мы добавим родителю рамку (border), margin дочернего элемента останутся внутри.

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

    Создание «Блочного контекста форматирования»

    Новый «Блочный контекст форматирования» (BFC) предотвратит выпадение margin за пределы родительского элемента. Если мы снова посмотрим на пример с первым и последним дочерними элементами, margin которых выпадают за пределы элемента-обёртки, и зададим обёртке display: flow-root , создав таким образом BFC, margin дочерних элементов останутся внутри.

    Чтобы узнать больше о display: flow-root , читайте мою статью «Understanding CSS Layout And The Block Formatting Context». Изменение значения свойства overflow на auto будет иметь такой же эффект, поскольку это также создает новый BFC, хотя он может приводить к появлению полос прокрутки, которые не нужны в определенных случаях

    Flex и Grid-контейнеры

    Flex-контейнер устанавливает новый гибкий (flex) контекст форматирования содержимого. Это то же самое, что установка блочного контекста форматирования, за исключением того, что flex-разметка используется вместо блочной разметки. Например, плавающие элементы (float) не работают внутри flex-контейнера и margin flex-контейнера не схлопываются с margin дочерних элементов.
    — Flexbox Level 1

    Если мы возьмём пример выше и сделаем обёртку Flex-контейнером, указав направление главной оси flex-direction: column, станет понятно, что теперь margin дочерних элементов не выходят за рамки обёртки. Дополнительно, margin между смежными flex-элементами не схлопываются, поэтому мы получаем расстояние в 100 пикселей между flex-элементами, что является суммой верхнего и нижнего margin, которые равны 50px каждый.

    Стратегии margin для вашего сайта

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

    Илон Маск рекомендует:  Требования к cms в эпоху веб 2 0

    Заметка: У Гарри Робертса есть отличная публикация, подробно описывающая причины, почему установка margin только в одном направлении является хорошей идеей, и не только из-за решения проблем схлопывания.

    Этот подход не решает проблему выпадения margin дочерних элементов за пределы родителя, с которой вы можете столкнуться. Эта конкретная проблема, как правило, менее распространена и понимание того, почему это происходит, может помочь найти решение. Идеальное решение проблемы заключается в том, чтобы компонентам, которые требуют этого, задать display: flow-root , а фолбеком (запасным вариантом) для старых браузеров вы можете использовать overflow , чтобы создать BFC (блочный контекст форматирования); превратить родительский элемент во flex-контейнер; или даже задать padding размером 1px. Не забывайте, что вы можете использовать запрос поддержки свойств браузером (support), чтобы определить, поддерживается ли свойство display: flow-root , чтобы только старые браузеры получили менее оптимальное решение.

    Я считаю, что в большинстве случаев понимание того, почему margin схлопываются (или нет), является ключевым моментом. Это позволит вам определять, как нужно бороться с этим в каждом конкретном случае. Какой бы способ вы не выбрали, поделитесь этой информацией с вашей командой. Довольно часто схлопывание margin является немного загадочным, поэтому и способы борьбы с ней не всегда очевидны. Комментарий в вашем коде может быть уместным — вы можете даже указать в нём ссылку на эту статью и помочь поделиться знаниями о схлопывании margin.

    Я решила, что дополню эту статью некоторыми дополнительными данными, имеющими отношение к margin.

    Процентные margin

    Когда вы используете проценты в CSS, это должны быть проценты от чего-то. Margin (так же, как и padding) заданные в процентах, всегда будут вычисляться относительно ширины родительского элемента. Это значит, что при использовании процентов, у вас всегда будут равные margin со всех сторон вокруг элемента.

    В CodePen-примере ниже, у меня есть обёртка шириной 200px, внутри которой блок, имеющий margin = 10%. Со всех сторон margin получается 20px, что равно 10% от 200px.

    Margin в мире, зависящем от потока

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

    После работы с логическими, относительными к потоку направлениями, становится легче говорить про начало и конец блока, чем про верх и низ. Чтобы делать это было проще, в CSS была введена спецификация Логических свойств и Значений. Она заменяет физические свойства на свойства, относительные к потоку.

    Если говорить о margin, это даёт нам следующие альтернативы (если мы работаем с английским языком или любым другим горизонтально записываемым режимом с направлением текста слева направо).

    • margin-top = margin-block-start
    • margin-right = margin-inline-end
    • margin-bottom = margin-block-end
    • margin-left = margin-inline-start

    У нас также есть два новых сокращенных свойства:

    • margin-block
    • margin-inline

    В следующем CodePen-примере я использовала относительные к потоку ключевые слова и потом меняла режим написания блока. Вы можете видеть, как margin следуют за текстовым потоком, а не привязаны к физическим сторонам.

    Вы можете почитать больше про логические свойства и значения на MDN или в моей статье «Understanding Logical Properties And Values» на Smashing Magazine.

    В завершение

    Сейчас вы знаете большую часть из того, что стоит знать о margin. Кратко:

    • Margin могут схлопываться. Понимание, когда это происходит, а когда нет, поможет вам решить любые проблемы, которые они могут создать
    • Установка margin только в одном направлении решает много проблем, связанных с ними
    • Как и в любой другой ситуации, связанной с CSS, делитесь со своей командой решениями, которые принимаете, и комментируйте свой код
    • Учитывание блочных и строчных измерений вместо физических сторон верх, право, низ и лево, поможет вам, так как веб движется к тому, чтобы стать независимым от режима написания

    Блочная модель

    При добавлении стилей к блокам вы можете заметить, что одни стили взаимодействуют с другими. Например, правило border взаимодействует с padding — границы учитывают внутренний отступ и отодвигаются от контента внутри. Также свойство padding увеличивает ширину и высоту блока, как бы «растягивая его».

    Данные особенности называются блочной моделью (box-model). По этой модели браузеры «рисуют» блок, наслаивая правила друг на друга.

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

    Задание

    Добавьте в редактор div с классом card-hello и установите следующие правила:

    • цвет фона #FA7268
    • цвет текста белый #FFFFFF
    • ширина блока: 230 пикселей
    • высота блока 25 пикселей
    • внутренние отступы 20 пикселей
    • внешние отступы 10 пикселей.
    • рамка шириной 2 пикселя, сплошная. Цвет #9C27B0
    • размер шрифта 20 пикселей

    Упражнение доступно только авторизованным пользователям.

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

    Box model — блочная модель

    Блочная модель (box model) — одно из фундаментальных понятий верстки.

    В спецификации W3C это понятие определяется так:

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

    Если по-русски, то это означает, что элемент в HTML документе выводится внутри своего отдельного прямоугольного блока.

    Структура элемента в блочной модели

    Вообще говоря, блок состоит из непосредственно контента (внутреннего содержимого), внутренних отступов, границ и, наконец, внешних отступов.

    Для управления каждой из составных частей блока существуют соответствующие CSS свойства: внутренние отступы — padding, границы — border, внешние отступы — margin. При желании эти свойства можно задать для каждой стороны блока отдельно (см. рисунок):

    В чем различие между внутренним и внешним отступом

    Итак, для элемента можно задать границы (рамку) и два вида отступов. Чем же они отличаются?

    Основное различие сразу бросается в глаза: padding — это отступ между контентом и границей, а margin — это отступ между границей и «внешним миром».

    Отсюда вытекает второе отличие — если для элемента задать фон (background), то этим фоном зальется и контент и внутренний отступ (padding). Margin же, находясь снаружи, всегда остается прозрачным.

    Padding, если провести аналогию, это поля на листе бумаги. Они имеют тот же цвет, что и сам лист, но текст на них не заходит. Margin — это расстояние от края листа до другого, лежащего рядом листа или, скажем, до края стола.

    Третье отличие заключается в том, что padding и margin по разному участвуют в подсчете общей ширины блока. Это зависит от принятой блочной модели.

    Какие бывают блочные модели

    В настоящее время существуют две основные блочные модели: модель от W3C, которая поддерживается всеми основными браузерами и, так называемая, традиционная — ее поддерживает IE6 в режиме обратной совместимости.

    В чем отличие различных блочных моделей

    Структура блока элемента абсолютно одинакова. Единственное, чем отличаются различные модели — это правилами определения размеров элемента.

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

    В блочной модели W3C размеры элемента, задаваемые свойствами width и height, включают в себя только контентную часть. То есть width и height не включают в себя ни размеры внутренних отступов, ни размеры границ (см. рисунок).

    традиционная блочная модель блочная модель W3C

    Конечно, такое разночтение нужно учитывать и устранять при верстке.

    Определяем действительные размеры элемента

    Традиционная блочная модель вопросов, как правило, не вызывает, все и так интуитивно понятно: элемент имеет такие размеры, какие мы ему задаем в CSS. Написали мы, допустим: «ширина элемента 100px и внутренний отступ по 10px с каждой стороны» и все хорошо. Элемент действительно займет 100px, по 10 из них уйдет на отступы, а на оставшихся 80px уютно расположится контент.

    Другое дело с блочной моделью W3C: здесь заданные в CSS размеры (width и height) и действительные размеры элемента не совпадают! А поскольку блочная модель W3C используется почти во всех браузерах, то без умения вычислять действительные размеры элемента для этой блочной модели много не наверстаешь.

    Давай разберемся подробно из чего состоят размеры элемента в блочной модели W3C.

    Рассмотрим высоту элемента:

    Из рисунка понятно, что действительная высота элемента рассчитывается так: border-top+padding-top+height+padding-bottom+border-bottom.

    Соответственно тот же пример «ширина элемента 100px и внутренний отступ по 10px с каждой стороны» уже даст блок с общей шириной 120px! Так как width:100px означает именно 100px под контентную зону. Все отступы и границы добавляются к этому фиксированному значению.

    Логика тоже ясна: главное в блоке — его содержимое. И если я сказал сто пикселей, значит сто, и никакие паддинги и бордеры мне ничего не поменяют!

    На первый взгляд все легко и просто! Но не тут то было…

    Как быть, например, в ситуации, когда width элемента равен 100%, а padding и/или border не равен 0? Тогда действительная ширина элемента будет больше 100%, а это далеко не всегда желательно.

    Вот это и есть самая большая сложность блочной модели W3C: когда ширина указана в процентах, а padding и border в пикселях. Такую ситуацию нужно, если не избегать, то во всяком случае использовать пореже и с пониманием вопроса.

    Управление блочной моделью

    Как описано выше, блочная модель W3C в некоторых случаях может доставить немало хлопот, поэтому мудрые люди из того же W3C предусмотрели в CSS3 возможность переключаться между блочной моделью W3C и традиционной блочной моделью используя CSS3 свойство box-sizing. Подробнее то, где и как это можно использовать описано в статье Box-sizing: переключаем блочную модель.

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL