Daily Tips & Tricks for Web Enthusiasts

Easy Layout Debugging with Outlines

When I’m working on a layout problem one of my favorite tricks to figure out what’s going on is applying outline: solid red 1px to the elements I’m working with. This works much better than borders because outlines do not affect layout, so my debugging outlines won’t get in my way or cause further problems.

This trick can easily be expanded for more complex debugging sessions too, just use different styles and colors on different elements. Here are some of my favorites:

.troublesomeElement {
    outline: solid red 1px;
}

.whatIsHappening {
    outline: dashed blue 1px;
}

.seriouslyWTF {
    outline: dotted orange 1px;
}

You can also combine this trick with some fancy selectors to make sure you remember to do certain things, like fill in blank links:

a[href=''] {
    outline: solid red 1px;
}