Почему display:block растягивается по ширине родителя?

Question

[Extramezz]

Под почему я имею ввиду: по какому правилу и как подлезть так, чтобы этого не происходило?

Comments

[Moskus]

Вы скажите, как вы хотите, чтобы это происходило.
Потому что прямой ответ на вторую половину вашего вопроса иначе получится в духе: "Использовать другое значение свойства display кроме block".

[Extramezz]

Moskus: Особенность block в том, что оно переносит элемент на новую строку. Вот это мне и нужно сохранить, отбросив вторую особенность - растягивание по ширине родителя.

Answer 1

[Valery]

¯\_(ツ)_/¯
display: table

Answer 2

[xmoonlight]

display:inline-block

Comments

[Extramezz]

Мне нужнен перенос строк в начале и в конце элемента

[xmoonlight]

Extramezz: в чем проблема то inline-block при этом использовать? задаёте высоту и все, и строки переносятся автоматом.

Answer 3

[Борис Якушев]

Почитайте на досуге, в чем различия разного вида блоков

Comments

[Extramezz]

Я это уже раз 10 перечитал и не нашёл ответа на то, почему блочные элементы растягиваются по ширине родителя. Там про это ничегошеньки нет!

[Борис Якушев]

Extramezz: Зачем по 10 раз перечитывать? Растягиваются по ширине родителя потому что так уж они работают.

Что-бы не происходило подобное, либо назначать width, либо inline-block

Answer 4

[Сергей]

Доходчиво описаны строчные и блочные элементы. Вам как раз нужны пункты про ширину
htmlbook.ru/samlayout/blochnaya-verstka/blochnye-e...
htmlbook.ru/samlayout/blochnaya-verstka/strochnye-...

Answer 5

[Lynn «Кофеман»]

Потому что так написано в стандарте www.w3.org/TR/CSS21/visudet.html#blockwidth

Может вы лучше покажете вёрстку и вам подскажут правильный способ.
Пока же у вас классическая пробема X-Y

Comments

[Extramezz]

jsfiddle.net/9ogL2jvj

[Lynn «Кофеман»]

Extramezz: Это дурацкий абстрактный пример не дающий ничего нового в вопросе.