.
Незамещаемый блок в нормальном потоке
Незамещаемый блочный элемент в нормальном потоке имеет такую ширину, чтобы сумма его компонентов блочной модели по горизонтали была равна ширине его содержащего блока.
margin-left + border-left-width + padding-left + width + padding-right + border-right-width +
margin-right = width of containing block
То есть, он растягивается на всю предоставленную ширину.
То есть, если у вас прямо в body
вложен одинокий div
, он будет нулевой высоты и
ширины как body
.
Далее рассмотрим граничные случаи.
Если width
не равно auto
и border-left-width
+
padding-left
+ width
+ padding-right
+
border-right-width
(плюс любой из margin-left
или margin-right
,
который не являются auto
) больше ширины содержащего блока, то любые значения auto
для margin-left
или margin-right
для следующих правил рассматриваются как нуль.
То есть, если обнуление одного или обоих margin
-ов, значение которых вы указали как
auto
, позволит впихнуть этот блок в содержащий, обнуление будет сделано.
Если все вышеперечисленные горизонтальные компоненты блочной модели имеют вычисленное значение, отличное
от auto
, значения считаются «чрезмерно ограниченными» ("over-constrained"), и одно из
используемых значений будет
отличаться от вычисленного. Если свойство direction
содержащего блока имеет значение
ltr
, указанное
значение margin-right
игнорируется и значение вычисляется так, чтобы равенство выше (на
картинке) было истинным. Если значение direction
равно rtl
, вместо этого
игнориуется margin-left
.
Если ровно одно свойство в равенстве указано как «auto», его используемое значение следует из равенства (как уравнение с одной неизвестной).
Если оба параметра margin-left
и margin-right
имеют значение auto
, их
используемые значения равны. Это горизонтально центрирует элемент относительно краев содержащего блока.
Если для width
задано значение auto
, любые другие значения auto
для
свойств из равенства становятся равными 0
, а значение width
следует из
результирующего равенства.
Именно поэтому трюк с margin: auto
не работает для центрирования блоков с не заданной шириной.
Она должна быть определена не как auto
, а это ее Initial value.
Источник - https://www.w3.org/TR/CSS2/visudet.html#blockwidth