CODEWITHSUNDEEP
css
gaurav rathor
gaurav rathor

Reputation: 206

Do we include margin in css box model while determining width or height of a element

Actually I have confusion as I read two different things on these websites. I know about the box-sizing and how it effects box model, but what if we are not considering the sizing and want to tell the size of element. Refer the url's below:

http://www.w3schools.com/css/css_boxmodel.asp

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

https://css-tricks.com/the-css-box-model/

The size of the box itself is calculated like this:

Width= width + padding-left + padding-right + border-left + border-right Height= height + padding-top + padding-bottom + border-top + border-bottom

I think from my understanding we calculate width = width + padding + border as total width of an element in default box-sizing.

Upvotes: 3

Views: 2738

Answers (1)

Rick
Rick

Reputation: 7506

Here's what I've roughly observed in Chrome.

If you set * {box-sizing: border-box;}, then an element's width equals width + border + padding. The width value is equivalent to width showed in devtool.

An element's width (of course) include its children's margin, but doesn't include its own margin. The width value is also equivalent to width showed in devtool. But you need to care about margin collapsing when calculating.

However, if for exmaple the topmost element's margin-top collapses, rendering out of body, then the extra magin doesn't add to the element height of the box showed in the devtool. But you can use document.getElementsByTagName('html')[0].scrollHeight to get the whole height.

So back to your question:

Do we include margin in css box model while determining width or height of a element?

I would say mostly Yes.

Again, with boder-box, an element's width == content-width(include margin of element's children) + border + padding.

Upvotes: 0

Related Questions