About css border, margin, padding and width

Question

Playing with css border, margin, padding and width I came across an extra pixel...

I know that the total width and height of an element is the sum of its width, border, margin and padding.

If you look at this http://jsfiddle.net/Fs8HQ/ , everything seems to work. When you click the button, moving some pixels from the border to the margin create a pseudo-animation.

Now let's set a fixed width and height in http://jsfiddle.net/Fs8HQ/1/ (remove width and height from :active): in Firefox and Chrome there is one extra-height and one extra-width pixels that move all the adjacent elements. in Opera there is one extra-width and two extra-height pixels. Where they come from?

But here http://jsfiddle.net/hJTpY/ moving the pixel from the border to the padding seems to fix everything, but the pseudo-animation is not the same.

In the first two fiddles the borders are reduced approaching to content; in the last one the borders are reduced by the contents that expands.

Why does that happen? I'm missing something?

Answer 1

This is a problem I noticed lately:

The default boxmodel introduced by the W3C is content-box if a proper doctype is declared (in contradiction to the Microsoft boxmodel which can be triggered by using quirks-mode in IEs).

However, lately I noticed that the browsers have UA-styles which declare box-sizing:border-box (for input-elements only?). That is why your trick does not work, because the border is accounted into the width. To fix this, you have to declare box-sizing:content-box. See this question dealing with the same problem.

Answer 2

You problem occurs because when you fixed the width, for instance at 100px, the box with its border will have a width of 100px (due to the box-sizing property), so your increase of margin is not compensated by a shrinking of the box, which occurs when you do not set its width.

With a fixed width, and box-sizing set as border-box, you should not modify the margin property at all to avoid the other box moving.

The easy fix is of course to set back box-sizing at content-box : http://jsfiddle.net/Fs8HQ/7/

For more information about the css box-sizing property, go there.