Question

Here’s an example of the problem I’ve encountered with a recent project:

http://jsfiddle.net/ZCpAT/12/

Notice how after clicking on a box and adding the .highlighted-node class to it (which modifies border-width and border-color), the box contents shift a bit to the right in chrome and safari, and the previously highlighted box’s contents shift to the left. What’s weird is that when I try touching any style in any of the 2 classes using Chrome’s dev tools, all the div’s content’s return to their original position.

Am I missing something here to prevent this shifting behavior from happening?

Answer 1

Instead of messing with the width and height, you could change the padding to replace the border.

In .node, the border is 1px and the padding is 4px on all sides. In .highlighted-node, the border is 5px, so the padding should be 4px smaller (=0px).

http://jsfiddle.net/ZCpAT/16/

Or, with a top padding of 15px/11px:

http://jsfiddle.net/ZCpAT/19/

To explain why your solution didn’t work:

The size of the box remains the same, because you change width and height, but the box contents are not affected at all by the box’s width and height, because they are left (and top) aligned.

The left position of the content = box margin + border + padding. So in one case it is 10 + 1 + 5 = 16px, while in the other it is 10 + 5 + 5 = 20px, shifting it 4px right (and down).