Using borders for basic CSS debugging

30 Jun 2013

Have you ever been in the middle of laying out a design in HTML/CSS, and wondered (maybe out loud, yea?), “Why the f is my div not showing up?! <…five minutes of grunting and self-hate later…> Oh, I didn’t set a height and width. Duh.”

I’ve come to adopt a simple tactic to avoid such mistakes. I simply throw on a colored border (or background color) on the div upon which I’m working.

That way, I can quickly identify my box model on the page, and quickly find out whether the CSS is doing what I expect it to be doing.

#myDiv {
border: 1px solid yellow;
display: inline-block;
float: left;
height: 50px;
width: 100px;