Why Does Inline-block Automatically Adjust Its Width According To It's Child's Width?

Please correct me if this question has already been stated on stackoverflow! I apologize dearly if it has but I've been looking for a while and have only found hows not whys. My qu

Solution 1:

display: inline-block is basically a sweet-spot between display: inline; (which is default for span, strong, em, etc.) and display: block; (which is default for div, p, etc).

Inline elements are built for text and thus they should flow inline with the text, and only be as wide as the text they contain. Thus, you can't set the width of an inline element.

Block elements are made to fill all the available width by default and are thus on their own line rather than flowing inline. This is good for things like paragraphs, but sometimes you want shorter lines so it is possible to adjust the width for block elements.

Inline-block elements are in the middle. They flow inline like display: inline; elements, but you can set the width like display: block; elements.

Solution 2:

The reason an inline-block defaults to a shrink-to-fit width is because if it didn't, then you wouldn't be able to place more than one inline-block on the same line, because every inline-block would then insist on occupying the entire width of its line box, leaving no room for any other inline-level boxes and thereby defeating the purpose of having an inline-level block container box (which is how "inline-block" is defined in the spec).

The reason a block box defaults to filling its containing block horizontally is because block boxes are stacked vertically in normal flow, with inline content flowing within inline formatting contexts established by them. There needs to be room for this inline content to flow, and room is provided by having block boxes fill their containing block horizontally.

See also:

• What is the difference between block and inline-block with width: 100%?
• Why doesn't "margin: auto" center an element vertically?

Solution 3:

The default value for width and height is auto that is calculated by the browser.

In your case width of the wrapper div is not specified( taken as auto) and it is display: inline-block( height/width can be set) so its width is calculated by the browser with respect to its child element's width(child_div).

Solution 4:

I would say there is a W3C specification for the property display:

Here some documentation from MDN: https://developer.mozilla.org/de/docs/Web/CSS/display

Here is the W3C specification: https://www.w3.org/TR/css-display-3/

---

And to answer your: Why?

There is a layout engine behind the CSS written in C++ in the browser. Normally the elements don't behave like you know from CSS. The people from the browser need to say where to draw these elements and the lines and how the elements should behave, therefore all these properties like:

display: block | inline-block or

position: static | relative | absolute | static etc.

So the engine knows how to draw all the lines the user will finally see in the browser window.

Here are more details about this: https://www.w3.org/TR/CSS2/visuren.html

I hope this was your question and I could help you to enlighten a little bit more about this.