Как формируется и от чего зависит ширина div блока, если width не задан?

Question

[PavelScron]

Хотелось бы понять логику ширины блоков. Какое дефолтное значение width у блоков, если ничего не прописывать? И как формируется ширина без указанного width?

Comments

[Сергей delphinpro]

Дефолтное значение width равно "auto". Абсолютное значение вычисляется в зависимости от многих других факторов - типа блока, контекста использования, некоторых css свойств. Строчный блок вычисляет ширину по содержимому, блочный элемент - по доступному пространству, плавающий - снова по содержимому, в контексте flex или grid контейнера еще куча правил и нюансов.

[Islam Ibakaev]

зависит от значения свойсва display.
По умолчанию, оно равно - block и занимает всю ширину родительского элемента. То есть наследуется(inheritance) значение свойства width родителя.

Answer 1

[coderlex]

На ширину content width родителя (т.е. внутреннего размера без padding-ов).
По умолчанию width = auto.
Если установить width = 100%, то учет padding-ов будет зависеть от свойства box-sizing.

Answer 2

[Stalker_RED]

Ширина блочных элементов
По умолчанию ширина блока вычисляется автоматически и занимает все доступное пространство. Здесь следует оговорить, что под этим подразумевается. Например, если тег в коде документа присутствует один, то он занимает всю свободную ширину окна браузера и ширина блока будет равна 100%. Стоит поместить один тег внутрь другого, как ширина внутреннего тега начинает исчисляться относительно его родителя, т.е. внешнего контейнера.

htmlbook.ru/content/blochnye-elementy

Comments

[PavelScron]

а по деволту width равен auto?

[Оптимус Пьян]

PavelScron: 100%

[Stalker_RED]

PavelScron: Оптимус Пьян:

Default value: auto

https://www.w3schools.com/cssref/pr_dim_width.asp

[Сергей Сосновский]

А display: block; вы не учитываете? От того он и имеет всю ширину родителя