Меня зовут София. Я - CSS инженер. Это мой блог.

Если вам очень больно без стилей, вы можете их.

.

Незамещаемый блок в нормальном потоке

Незамещаемый блочный элемент в нормальном потоке имеет такую ширину, чтобы сумма его компонентов блочной модели по горизонтали была равна ширине его содержащего блока.

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