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

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


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


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


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

default size of a div

Outer div

outer div

Inline div

inline div

Inner div

enter image description here

Tags:

Html

Css

Recent Posts