Posted By

michellebracken on 08/18/11


Versions (?)

Simple Debugging in CSS

 / Published in: CSS

Sometimes your CSS doesn’t seem to be working like you expect and you want to isolate one element in your html to see what space it occupied. An easy way to do this is to give the element a border temporarily

One downside of this is the extra px in the border could temporarily throw your layout out of whack, since it increases the width of your element. You may find at times it drops a floated element further down the page for example. Still it can be a quick and easy way to see what’s going on and you can overcome the width limitation, by temporarily decreasing the width you’ve given to the element to compensate for the extra width the border adds.

  1. 1 .element {border:1px solid red}

Report this snippet  

You need to login to post a comment.