0:00
[БЕЗ_ЗВУКА] В данном
видео мы рассмотрим, как браузеры вычисляют размеры блочных элементов,
руководствуясь формулой, которую мы ввели ранее.
Напомню, что эта формула гласит: margin'ы слева и справа + border'ы
слева и справа + padding'и слева и справа + ширина контента.
В данном случае я предполагаю, что CSS свойство box-sizing у нас будет
content-box равны ширине содержащего блока.
Итак, что делает с этой формулой браузер?
Первая операция, которую браузер проводит,
— это переносит в правую часть border и padding.
Далее, условие, которым руководствуется браузер,
такое: если border и padding не заданы явно, то они всегда будут равны нулю.
Теперь у нас получается следующая ситуация.
В правой части нашего уравнения известны значения: это ширина
содержащего блока и padding с border'ом, которые либо заданы, либо равны нулю.
Браузеры вычисляют margin-left, margin-right и ширину блока.
Как они это делают?
Для margin-left условие следующее: если margin-left не задан,
значит он равен нулю.
Если margin-left задан в auto, то он вычисляется.
Если ширина не задана, то она вычисляется.
И наконец, margin-right вычисляется всегда, если заданы ширина и margin-left.
Все эти условия сложно запомнить,
поэтому давайте рассмотрим их на конкретных примерах.
Для наглядности у внешнего блока я задал padding'и, чтобы вы видели,
что у нас два блока.
Итак, у внешнего блока задана ширина 666 px.
Первый пример показывает, что ширина внутреннего блока не изменяется,
даже если контент внутри него будет значительно больше ширины блока.
Формула работает — ширина 666 px.
Следующий пример, когда мы задаем margin слева.
Например, 500 px.
В таком случае ширина блока благодаря формуле будет равна 166 px.
Другой пример, когда мы задаем margin и слева и справа.
В таком случае ширина будет равна 100 px.
Другой пример — мы задаем ширину блока.
В таком случае у нас будет вычисляться правый margin, и он будет равен 366 px.
Так происходит, потому что margin-left в данном случае будет равен нулю.
Правило, которое гласит, что margin-left равен нулю, когда он не задан явно.
Это же правило работает в следующем примере, когда мы задаем margin-right: 0.
Это условие браузер просто проигнорирует, потому что у нас задан margin
слева и ширина, а значит margin справа должен быть вычислен.
Если же мы зададим margin слева в значении auto,
то мы увидим эффект как будто бы прилипания элемента к правой границе.
Это происходит потому, что браузер теперь явно вычисляет значение margin'а слева.
И наконец, трюк, который пользуются многие верстальщики,
— это как расположить элемент посередине.
Это можно сделать,
когда мы явно задаем ему ширину и margin слева и margin справа в значение auto.
В этом случае браузер не только вычисляет значение margin'а слева и справа,
но и делит его пополам между ними.
И получается, что блок находится как бы посередине.
Эта формула справедлива и для отрицательных значений margin'ов.
Например, если вы задаете margin справа в −100 px,
то на самом деле благодаря этой формуле вы увеличиваете ширину элемента,
и теперь в данном случае у нас ширина элемента будет 766 px.
Если же вы зададите margin'ы и слева и справа отрицательными,
то вы увеличите ширину, опять же.
В данном случае ширина будет уже 866 px.
Если же вы зададите ширину явно,
и margin-left зададите отрицательным, то вы просто увеличите margin справа.
Формула снова работает.
Наконец, то же самое справедливо для отрицательного правого margin'а,
но в данном случае нам нужно обязательно задать значение margin-left в auto.
Еще один необычный эффект, который мы можем наблюдать в браузерах,
называется «схлопывание отступов».
В чем он выражается?
Допустим, у нас есть два соседних элемента.
Один элемент мы задаем ему margin снизу, а второму элементу мы задаем margin сверху.
Мы ожидаем, что результирующий отступ между этими двумя элементами будет
суммой margin'ов, но в результате видим что-то другое.
Или этот эффект проявляется,
когда внутрь одного элемента мы помещаем другой с верхним margin'ом.
Мы ожидаем, что у внутреннего элемента отступ сверху будет равен заданному,
но в результате мы видим что-то такое.
Что же происходит?
Если у двух блочных элементов,
принадлежащих одному контексту форматирования, пересекаются margin'ы,
то браузер вычисляет максимум и минимум среди них.
Если максимум будет ниже нуля, то браузер приравнивает его к нулю.
Аналогичное происходит, если минимум будет больше нуля.
Браузер также приравняет его к нулю.
А далее результирующий margin будет равен сумме вычисленных максимума и минимума.
Давайте рассмотрим это на конкретных примерах.
Если, например, margin снизу у нас будет 60 px,
а margin сверху у нас будет 100 px, то результирующий margin будет 100 px.
Так как минимальный margin был больше нуля,
то он равен нулю, и результирующий margin — 100.
Другой пример, когда у нас margin снизу 60 px, а margin сверху −60 px.
В таком случае результирующий margin будет 0.
Элементы как будто бы и не имеют этого отступа.
И наконец, третий пример, когда у нас margin сверху будет −80 px,
а margin снизу будет 60 px.
В этом случае результирующий margin будет −20 px, и один элемент наедет на другой.
В этом видео мы рассмотрели, как браузеры высчитывают значение margin'ов слева и
справа, а также ширину элементов в зависимости от различных условий,
и эффект схлопывания отступов, то есть когда результирующий
margin будет не равен сумме пересекающихся margin'ов.
Олег Семичевразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Мохов Олегразработчик интерфейсов, Яндекс
