Отличие outline от border | Margin схлопывание
Outline
Свойство border является частью блока и влияет на его размеры. Альтернативой border выступает свойство outline. Вот его особенности:
- outline не влияет на размеры и положение самого элемента
- outline не занимает место, не влияет на окружающие элементы и отображается поверх них для outline нельзя задать параметры линии на отдельных сторонах элемента, outline применяется сразу ко всем четырём сторонам
- свойство border-radius, задающее радиус скругления рамки, не действует на outline
- outline можно расширять и сжимать с помощью outline-offset, отрицательное значение выводит рамку внутри элемента
- outline не заменяет border и вполне может существовать вместе с ним.
Margin схлопывание
Эффект «схлопывания» внешних отступов — случай, когда отступ по вертикали между двумя соседними элементами равен максимальному отступу между ними. Допустим отступ первого элемента равен 50px, а второго 30px, тогда отступ между ними будет равен 50px. Горизонтальные отступы между элементами просто складываются.
Схлопывание не всегда требуется при вёрстке страницы, а в некоторых случаях вообще ломает дизайн. Поэтому следует знать, в каких случаях схлопывание не работает.
Схлопывание margin`ов не срабатывает:
- для элементов с абсолютным позиционированием, т. е. таких, у которых position установлено как absolute или fixed
- для обтекаемых элементов (для них свойство float задано как left или right)
- для строчных или строчно-блочных элементов (для них свойство display задано как inline или inline-block)
- для флекс-элементов (у родителя которых свойство display задано как flex или inline-flex)
- для элемента html
Схлопывание не действует на дочерние элементы:
- если у родителя значение overflow задано как auto, hidden или scroll;
- если у родителя на стороне схлопывания задано свойство padding
- если у родителя на стороне схлопывания задано свойство border