A very common thing to do while developing/designing a page is highlighting a current object that your creative mind is focused, let’s say: a form. So, you want to conduct a great deal of stylesheet applying to it, make it’s width OK to colate with other elements and such, and you get a good idea to highlight it with 1px red border (my weapon of choice, mostly). Of course, almost always when you apply a style – even better a cetain class (more on that later) – that look’s like this:

.highlight { border: 1px solid red; }

You get your object wrapped in red border one pixel thick – but wham! Everything shifted. Why? Because – border play’s a role in overall picture.

Due to CSS box model, there are few things that are computed and can have variable values: margin, border, padding and a nominal width of an object. Is there a better way to highlight something?

Sure – outline. It’s similar to border – but with one difference – it doesn’t play part in overall width/height. So, it makes designing thing cosy, and spares your nerve. Change your class to following:

.highlight { outline: 1px solid red; }

Objects will still be highlighted with red box, but this time nothing shifts or collides – because outline doesn’t do part in width-game. Not even if you set it’s value to much more than 1px – but that’s useless, ugly and a different subject…

Also, a great thing to have a separate class for this matter, I personally used to add this line of code in every CSS selector that i needed highlighting, and after a staging period – that’s a lot of copy/paste, commenting that part of code and deleting afterwards. Save yourself some time – that’s what productivity is all about, which I learned thoroughly today from dr Tima Segedinac‘s class.

Thanks to Dušan Vesić today that mentioned this issue, which made me share it here.