ilyachalov (ilyachalov) wrote,
ilyachalov
ilyachalov

Category:

CSS: схлопывание внешних отступов 2

Чуть больше месяца назад я уже писал пост про так называемое «схлопывание внешних отступов» (по-английски «margin collapsing»), которое касается только вертикальных внешних отступов:

CSS: схлопывание внешних отступов

Это явление надо было бы, наверное, назвать не «схлопыванием», а «наложением». Почему? Раньше я думал, что при «схлопывании внешних отступов» один из внешних отступов (меньший) вообще «исчезает» и остается только один (больший). На самом же деле, как я понимаю, ни один из таких внешних отступов не исчезает, они оба остаются, но просто «накладываются» один на другой.

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

У меня в задаче попался такой случай. Код на языке HTML в теле HTML-страницы:
<body>
  <h2>Заголовок</h2>
  <button>Кнопка</button>
</body>

Стили к этой HTML-странице на языке CSS:
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

В данном случае «схлопывание внешних отступов» (по вертикали) произойдет у HTML-элементов body (родительский HTML-элемент) и h2 (дочерний HTML-элемент).

Как видно из описания стилей, у HTML-элемента body внешний отступ равен нулю. У HTML-элемента h2 есть внешний отступ, определяемый браузером по умолчанию, в моём браузере он равен 0.83em (около 20px для шрифта по умолчанию, установленного в моём браузере).

Получается, что в данном случае весь внешний отступ HTML-элемента h2 выходит за пределы родительского HTML-элемента body из-за «схлопывания внешних отступов».

Из-за этого начало HTML-элемента html и HTML-элемента body расходятся друг с другом на 20px (HTML-элемент html включает внешний отступ HTML-элемента h2, а HTML-элемент body не включает в себя этот внешний отступ).

А, так как HTML-элемент html и HTML-элемент body имеют одинаковые размеры (это установлено вышеописанным стилем), равные области просмотра браузера, то и их нижние концы тоже расходятся друг с другом. В результате HTML-элемент body вылезает снизу за пределы HTML-элемента html на 20px. Из-за чего появляется вертикальная полоса прокрутки, которая в данном случае на самом деле не нужна, так как содержимым HTML-страницы являются всего лишь заголовок и кнопка (они занимают мало места на обычном экране настольного компьютера, если окно браузера развернуто на весь экран).

Чтобы убрать эту ненужную в данном случае вертикальную полосу прокрутки, лучше всего избавиться от «схлопывания внешних отступов». Это можно сделать множеством способов. Я выбрал тот же способ, который уже упоминал в первом посте по этой теме. Внесем исправления в вышеописанный стиль (я выделил дополнение красным цветом):
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: auto;
}

Теперь ненужная вертикальная полоса прокрутки исчезла. Но она появится в нужный момент, если содержимое HTML-страницы действительно выйдет за пределы области просмотра браузера. Указанная инструкция не запрещает появление вертикальной полосы прокрутки полностью.
Tags: Образование, Программирование
Subscribe

  • JavaScript: Blob

    Прочел подраздел 2.3 « Blob» третьей части учебника по JavaScript. Для меня эта статья оказалась настолько объемной в плане нового, что ее разбор…

  • Сказка про двоичные данные, кодировку Windows-1251 и Юникод

    Вопрос из комментариев к подразделу 2.3 « Blob» третьей части учебника по JavaScript, цитата: Не могу найти способ выдавать файл с кодировкой…

  • Как работает кодирование Base64, окончание

    Начало: « Как работает кодирование Base64». Пример второй. « Картинка-смайлик» В предыдущем примере кусок двоичных данных, содержащий текст,…

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 0 comments