CODEWITHSUNDEEP
javascriptcssborder-box
Vandervals
Vandervals

Reputation: 6054

Understanding offsetWidth and clientWidth when css border-box is active

I come from this question: Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively

I understand that this is the case for the standard box model, is that right?

But what happens when you have something like this:

*{
  box-sizing: border-box;
}

Are offsetWidth and clientWidth equal now? Does this happen always with this rule?

And what about padding-box?

Upvotes: 6

Views: 2170

Answers (1)

Roope
Roope

Reputation: 4507

Try it out yourself: http://codepen.io/anon/pen/WvojWw

By default it is set to box-sizing: border-box but just change that in the styles to get different results.

It calculates offsetWidth and clientWidth for you when you click the button.


Offset width is equal to all but margins, so if you use border-box, you're just going to get the width you specify.

And client width is equal to all but margins and borders, so you're just going to get your specified width - borders when you use border-box.

offsetWidth

without border-box:

offsetWidth = width + padding + border

with border-box:

offsetWidth = width

clientWidth

without border-box:

clientWidth = width + padding

with border-box:

clientWidth = width - border

Upvotes: 7

Related Questions