Схлопывающиеся отступы
При рассмотрении блочной модели была затронута тема схлопывания отступов. Этот эффект наблюдается, когда у блочных элементов расположенных рядом друг с другом по вертикали, отступы не суммируются, а объединяются между собой. Само схлопывание действует на два и более блока (один может быть вложен внутрь другого) с отступами сверху или снизу, при этом примыкающие отступы комбинируются в один. Этот эффект работает только для блоков, у которых не заданы поля и границы. Для отступов слева и справа схлопывание никогда не применяется.
Несмотря на загадочность, схлопывание несёт в себе сугубо практическое значение и в первую очередь предназначено для корректного отображения текста. Расстояние между абзацами (тег
) без схлопывания увеличится в два раза, тогда как верхний отступ первого абзаца и нижний отступ последнего абзаца останутся неизменными. Схлопывание гарантирует, что расстояние в абзацах везде будет одинаковым.
Правила вычисления единого отступа меняются в зависимости от ряда условий, так, есть разница между положительным и отрицательным значением отступа, родительским и дочерним элементом. Далее перечислим типовые примеры.
Оба отступа положительны
Для положительных значений отступов выбирается наибольшее значение из двух отступов, и оно устанавливается как расстояние между блоками. На рис. 3.13 пунктирной линией выделены отступы у блоков и показано как в этом случае блоки устанавливаются относительно друг друга.
Рис. 3.13. Разные отступы у блоков
При одинаковых значениях отступов за расстояние между блоками принимается одно из них.
В следующем стиле у тега нижний отступ задаётся как 20 пикселов, а у
верхний отступ как 5 пикселов.
H1 < background: #F0BA7D; margin-bottom: 20px; >P
Значения отступов сравниваются между собой, и остаётся наибольшее число, расстояние между заголовком и абзацем текста принимается равным 20 пикселов (рис. 3.14).
Рис. 3.14. Положительные отступы
Один из отступов отрицательный
В этом случае происходит складывание отступов по правилам математики:
Здесь x и y величина прилегающих отступов элементов.
В следующем стиле у тега нижний отступ задаётся как 20 пикселов, а у
верхний отступ с отрицательным значением 10 пикселов.
H1 < background: #F0BA7D; margin-bottom: 20px; >P
Из значения нижнего отступа тега отнимается значение верхнего отступа
, в итоге расстояние между заголовком и абзацем текста будет равно 10 пикселов (рис. 3.15).
Рис. 3.15. Один отступ отрицательный
Если полученное значение в результате суммирования окажется отрицательным, то оно будет действовать на нижний блок, соответственно, он сдвинется вверх на указанное значение.
Оба отступа отрицательны
Из двух значений выбирается наибольшее по модулю, оно же и выступает в качестве отрицательного отступа между элементами. Так, если отступы равны -10px и -20px, то итоговое значение будет -20px.
В следующем стиле у тега нижний отступ задаётся как 1em , а у
верхний отступ с отрицательным значением 10 пикселов.
H1 < background: #F0BA7D; margin-bottom: -1em; >P
При использовании разных единиц в отступах, браузер приводит их к одним единицам и сравнивает между собой. В данном случае 1em больше, чем 10px , поэтому текстовый абзац сдвинется вверх на 1em (рис. 3.16).
Рис. 3.16. Отрицательные отступы
Вложенные элементы
Предположим, что в нижнем блоке располагается дочерний элемент, у которого задан верхний отступ. Из блочной модели следует, что такой отступ сдвигает дочерний элемент вниз относительно верхнего края родителя. Однако с учётом схлопывающихся отступов результат будет иным. Отступ словно выйдет за пределы блока и будет задавать расстояние между верхним блоком и родительским элементом (рис. 3.17).
Рис. 3.17. Отступы с учётом дочернего элемента
В следующем стиле у тега нижний отступ задаётся как 20px , у верхний отступ как 30px , а у тега
вложенного в верхний отступ как 50px .
H1 < background: #F0BA7D; margin-bottom: 20px; >DIV < background: #CADADD; margin-top: 30px; >P
На элементы воздействует сразу три разных отступа. Чтобы сделать расчет итогового отступа в такой сложной ситуации, можно действовать последовательно. Вначале определяем отступ между и . Значения оба положительны, поэтому берём большее, т.е. 30px. Далее сравниваем отступ от полученного значения и
. Оба значения положительны, при этом верхний отступ у
наибольший, он и будет итоговым отступом между и (рис. 3.18).
Рис. 3.18. Отступы с учётом вложения тегов
Схлопывание с вложенными тегами работает и без наличия верхнего элемента. Если оставить только конструкцию
.
и для неё задать стиль выше, то
Браузер Internet Explorer до версии 7.0 включительно не схлопывает отступы для элементов, у которых установлено свойство hasLayout . В частности, один из способов установить это свойство, это задать ширину для блока (свойство width ). Подробнее об этом смотрите главу посвященную IE.
Отмена схлопывания
Схлопывание не всегда требуется при вёрстке страницы, а в некоторых случаях вообще «ломает» дизайн. Поэтому следует знать, в каких случаях схлопывание работает, а в каких нет.
Схлопывание не срабатывает:
- для элементов, у которых установлено свойство padding .
- для элементов, у которых на стороне схлопывания задана граница;
- на элементах с абсолютным позиционированием, т.е. таких, у которых position установлено как absolute ;
- на плавающих элементах (для них свойство float задано как left или right );
- для строчных элементов;
- для .
Также схлопывание не срабатывает при соблюдении некоторых условий:
- для элементов, у которых значение overflow задано как auto , hidden или scroll схлопывание не действует для их дочерних элементов;
- у элементов, к которым применяется свойство clear, не схлопывается верхний отступ с нижним отступом родительского элемента.
В качестве примера возьмём достаточно распространённый случай, когда нам требуется сделать два слоя, у которых задан только фоновый цвет, но нет полей и границ (пример 3.9).
Пример 3.9. Близлежащие блоки
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Отступ заголовка .header < height: 100px; background: #F0BA7D; >.content Заголовок Текст
Хотя у слоёв не заданы отступы, между ними появится небольшой промежуток (рис. 3.19). Он возникает из-за действия отступа у дочернего элемента , верхний отступ у которого устанавливается по умолчанию.
Рис. 3.19. Отступ между слоями
Для обнуления появившегося отступа, который нам на самом деле не нужен, есть разные пути. Поскольку схлопывание не работает для блоков с полями и границами, можно задать значение padding для слоя content . Главное, чтобы значение было больше нуля, подойдет даже 1px . Также добавление границы ко всем сторонам или только линии для верхнего края отменит схлопывание. Ещё один способ — обнулить верхний отступ у и заменить его на padding-top при необходимости. Использование свойства overflow со значением auto также даст необходимый эффект. Ниже все эти методы сведены воедино.
.content < border-top: 1px solid #CADADD; /* Линия сверху, цвет совпадает с цветом фона */ padding: 10px; /* Поля в блоке */ overflow: auto; >.content h1 < margin-top: 0; /* Обнуляем верхний отступ */ padding-top: 1em; /* Вместо отступа сверху добавляем поле */ >Поскольку отступы довольно активно применяются в вёрстке, их схлопывание может оказать принципиальное значение на вид документа. Учитывайте этот эффект при формировании блоков.
Как отобразить пустой элемент?
Помнится, раньше как-то решал этот вопрос, но сейчас потерял решение, поэтому и прошу о помощи.
В общем имеется такой HTML код:
div.layer > span < transition: opacity 0.1s ease, visibility 0s linear 0.1s, transform 0.2s ease; transform: rotate(90deg); margin: 0px; padding: 20px; top: 0px; right: 0px; text-align: center; visibility: hidden; opacity: 0; position: fixed; cursor: pointer; >div.layer.show > span
Так вот эта SVG картинка не отображается. Блок есть (40 на 40), навести на него можно, нажать можно, но картинка не отображается. А отображается только тогда, когда после span вставляю хоть какую-нибудь букву. Как отобразить эту картинку без каких-либо дополнительных символов? А то что-то подзабыл.
- Вопрос задан более трёх лет назад
- 1225 просмотров
Свойство position
Свойство position позволяет сдвигать элемент со своего обычного места. Цель этой главы – не только напомнить, как оно работает, но и разобрать ряд частых заблуждений и граблей.
position: static
Статическое позиционирование производится по умолчанию, в том случае, если свойство position не указано.
Его можно также явно указать через CSS-свойство:
position: static;Такая запись встречается редко и используется для переопределения других значений position .
Здесь и далее, для примеров мы будем использовать следующий документ:
Без позиционирования ("position: static"). Заголовок А тут - всякий разный текст.
. В две строки!
В этом документе сейчас все элементы отпозиционированы статически, то есть никак.
Элемент с position: static ещё называют не позиционированным.
position: relative
Относительное позиционирование сдвигает элемент относительно его обычного положения.
Для того, чтобы применить относительное позиционирование, необходимо указать элементу CSS-свойство position: relative и координаты left/right/top/bottom .
Этот стиль сдвинет элемент на 10 пикселей относительно обычной позиции по вертикали:
position: relative; top: 10px; h2 Заголовок сдвинут на 10px вниз. Заголовок А тут - всякий разный текст.
. В две строки!
Координаты
Для сдвига можно использовать координаты:
- top – сдвиг от «обычной» верхней границы
- bottom – сдвиг от нижней границы
- left – сдвиг слева
- right – сдвиг справа
Не будут работать одновременно указанные top и bottom , left и right . Нужно использовать только одну границу из каждой пары.
Возможны отрицательные координаты и координаты, использующие другие единицы измерения. Например, left: 10% сдвинет элемент на 10% его ширины вправо, а left: -10% – влево. При этом часть элемента может оказаться за границей окна:
h2 Заголовок сдвинут на 10% влево. Заголовок А тут - всякий разный текст.
. В две строки!
Свойства left/top не будут работать для position:static . Если их всё же поставить, браузер их проигнорирует. Эти свойства предназначены для работы только с позиционированными элементами.
position: absolute
position: absolute;Абсолютное позиционирование делает две вещи:
- Элемент исчезает с того места, где он должен быть и позиционируется заново. Остальные элементы, располагаются так, как будто этого элемента никогда не было.
- Координаты top/bottom/left/right для нового местоположения отсчитываются от ближайшего позиционированного родителя, т.е. родителя с позиционированием, отличным от static . Если такого родителя нет – то относительно документа.
- Ширина элемента с position: absolute устанавливается по содержимому. Детали алгоритма вычисления ширины описаны в стандарте.
- Элемент получает display:block , который перекрывает почти все возможные display (см. Relationships between „display“, „position“, and „float“).
Например, отпозиционируем заголовок в правом-верхнем углу документа:
h2 Заголовок в правом-верхнем углу документа. Заголовок А тут - всякий разный текст.
. В две строки!
Важное отличие от relative : так как элемент удаляется со своего обычного места, то элементы под ним сдвигаются, занимая освободившееся пространство. Это видно в примере выше: строки идут одна за другой.
Так как при position:absolute размер блока устанавливается по содержимому, то широкий Заголовок «съёжился» до прямоугольника в углу.
Иногда бывает нужно поменять элементу position на absolute , но так, чтобы элементы вокруг не сдвигались. Как правило, это делают, меняя соседей – добавляют margin/padding или вставляют в документ пустой элемент с такими же размерами.
Одновременное указание left/right , top/bottom
В абсолютно позиционированном элементе можно одновременно задавать противоположные границы.
Браузер растянет такой элемент до границ.
div 10px от границИщем ошибки
Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальную часть.
Познакомимся с некоторыми часто встречающимися ошибками, чтобы в дальнейшем их не допускать.
HTML позволяет вкладывать теги друг в друга, и одна из самых частых ошибок заключается в неправильной вложенности, например:
Текст выделен
полужирнымВ этом примере тег
закрывается раньше, чем тег , и это ошибка.
Другой тип ошибок случается из-за досадных опечаток и невнимательности, когда забывают пробелы между атрибутами тега или неправильно пишут их названия.
Вот и инструктор Кекс решил обновить своё резюме поздно ночью. Захотелось сделать его лаконичнее, поиграться с оформлением. Но невнимательность его подвела. Зато вы можете потренироваться отыскивать и исправлять ошибки.
Если совсем потеряетесь, то внизу есть подсказка. Только чур сразу не смотреть!
Показать подсказку
1. Обратите внимание на порядок закрытия тегов.
2. Хватает ли пробелов?
3. Проверьте правильность написания атрибутов. Их там немного.
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
Инструктор Кекс [v.2]
инструктор Кексик.
Привет! Меня зовут Кекс и я ваш будущий инструктор. Я веб-разработчик и живу в Санкт-Петербурге.
До встречи в последующих курсах!
body < font-family: "Georgia", serif; >.photocard < display: block; width: 300px; margin: 20px auto; box-shadow: 5px 5px 0 #e7471e; >.nice-cite < margin: 1.5em 0; padding: 0.5em 25px; line-height: 1.5; background-color: #f5f5f5; border-left: 5px solid #e7471e; >
Проверить на сервере Проверка проводилась слишком много времени, попробуйте ещё разок Показать ответ
Спасибо! Мы скоро всё исправим)
Автозапуск
Код изменился, нажмите «Обновить» или включите автозапуск.
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
Увеличить 100% Уменьшить
Задачи Выполнено
Помогите Кексу исправить ошибки в HTML-коде его нового резюме:
- Первую ошибку с лишней пустой строкой,
- вторую ошибку с отсутствием картинки,
- третью ошибку с пропавшим оформлением цитаты.
Если у вас возникли сложности во время прохождения задания, то вы можете обратиться за помощью на наш форум или задать вопрос в Телеграм-чате.
- Наша группа в VK
- Наш канал на YouTube
- Наша страница в Twitter
- Наш канал в Telegram