Where is the default size of a div element defined or calculated?

Question

I wonder how a browser calculates the initial height and width values for div elements without a given size. Given this div for example:

<div>
  TEST
</div>

My browser (Chrome) calculates the size of this div to 1255 x 18, with a windowsize of 1271 x 284. It seems like divs default to the height of a line and the inner width of the window minus some. But I would like to know more about it.

I couldn't find anything here: https://html.spec.whatwg.org/multipage/semantics.html#the-div-element

Where can I find this kind of information?

Inline elements has the size of the content inside, block elements has the full size — Luís P. A., Jan 26 '16 at 09:33
If JS counts, here is your solution: http://stackoverflow.com/a/15615701/4060922 — DamianoPantani, Jan 26 '16 at 09:35
Chrome's default styling puts `margin: 8px` on `body`, so that's where the `16px` between 1255 and 1271 are going. — CupawnTae, Jan 26 '16 at 09:39
Do you mean the viewport size? Because the window size often takes into account the scrollbar, window frames, and the browser chrome (with a lowercase c). — BoltClock, Jan 26 '16 at 09:48

score 30 · Accepted Answer · answered Jan 26 '16 at 09:40

30

div tags are block level elements. All block level elements inherit the width of their parent element by default.

In your example, the div is inheriting the width of the parent body tag, taking into account any margin or padding on the body element.

MDN is usually a great source of information for this sort of thing - see https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements

answered Jan 26 '16 at 09:40

Josh Harrison

5,927
1
30
44

6

this doesn't mention height. Which is max(0,content). – jiggunjer Aug 31 '17 at 03:00

score 11 · Answer 2 · answered Jan 26 '16 at 09:35

11

It has display: block so width is 100%, height is auto so it's the size of whatever's inside.

answered Jan 26 '16 at 09:35

JordyvD

1,565
1
18
45

3

width 100% can outgrow the container if there are paddings and box sizing is content-box, while leaving width not set does not outgrow the container. – cipak Sep 29 '20 at 06:42

score 4 · Answer 3 · edited Jun 20 '20 at 09:12

According to the spec, a default value of 8px is expected to be used for the margin.

For each property in the table below (margin-top, margin-right,margin-bottom,margin-left), given a body element, the first attribute that exists maps to the pixel length property on the body element. If none of the attributes for a property are found, or if the value of the attribute that was found cannot be parsed successfully, then a default value of 8px is expected to be used for that property instead.

That is why your width is 1255 which is (1271 - 8 * 2). The heigh is the from the content -- TEST.

I have created a slightly more complex example:

<body>
<div id="outer">
  <div style="display:inline">
    <div id="inner">
      X
    </div>
  </div>
</div>
</body>

Body

Outer div

Inline div

Inner div

score 1 · Answer 4 · answered Aug 01 '18 at 12:10

1

All block level elements takes the available width of their parent.

answered Aug 01 '18 at 12:10

Soufiane Roui

660
6
19

1

you could have wrote this in comment – Enea Dume Aug 01 '18 at 12:45

Where is the default size of a div element defined or calculated?

4 Answers4

Body

Outer div

Inline div

Inner div

Linked

Related