CODEWITHSUNDEEP
htmlcss
user6169571
user6169571

Reputation:

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 question is this: Parent divs seem to automatically take up the full width of the page unless { display: inline-block; }is specified for it. When it is specified, it then adjusts it's width according to the width of it's child element. This really comes in handy, but I feel that it's important for me to know why this is happening. Here is some code for visual representation. Thanks in advance!

Edit: I see that some people have marked my question as a duplicate, but please show me where in the other question it explains why display inline-block automatically adjusts to it's children's height and width. Thank you!

#wrapper {
  border: 1px solid black;
  display: inline-block;
}
#child_div {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  margin: 10px;
}
<div id="wrapper">
  <div id="child_div"></div>
</div>

Upvotes: 8

Views: 7437

Answers (4)

Stefan Rein
Stefan Rein

Reputation: 9062

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.

Upvotes: 0

BoltClock
BoltClock

Reputation: 723668

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:

Upvotes: 2

Web_Designer
Web_Designer

Reputation: 74550

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.

Upvotes: 8

Uday
Uday

Reputation: 365

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).

Upvotes: 0

Related Questions