6

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>
  • Visit this link http://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block – Aayush Gupta Jan 23 '17 at 06:14
  • 1
    What exactly is your question? Are you asking why `display: block` defaults to 100% width, and `display: inline-block` defaults to it's contents width? – Matthew Beckman Jan 23 '17 at 06:14
  • 2
    Possible duplicate of [What is the difference between display: inline and display: inline-block?](http://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block) – Abhishek Pandey Jan 23 '17 at 06:15
  • 1
    @Matthew Beckman: I think he's asking why the behavior is defined this way. – BoltClock Jan 24 '17 at 05:24
  • @Matthew Beckman: Yes, my question is why does display: inline-block default to its content's width. –  Jan 24 '17 at 05:37

4 Answers4

4

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.

Web_Designer
  • 72,308
  • 93
  • 206
  • 262
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:

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
0

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Stefan Rein
  • 8,084
  • 3
  • 37
  • 37
  • Thank you very much for the documentation! I would upvote if I were a high enough level. It says that inline-block flows around other elements as an inline element would. Just to be clear, is that the reason why it adjusts to its children's height and width? Because it is flowing around the elements as an inline element would? –  Jan 24 '17 at 05:14
  • 1
    I think the other ones did answer this question quite well! – Stefan Rein Jan 24 '17 at 05:23
0

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

Uday
  • 345
  • 4
  • 8