CSS Workflow: Use Borders for Debugging Your Layouts Fast

When you’re styling any level of complex website layouts with CSS (beyond a simple article layout) things can get messy fast. This often leads to various layout issues.

Some of the most common CSS layout problems are:

  • Overlapping elements (often an overflow issue)
  • Collapsing elements (often a margin issue)
  • Extra white space (many things can cause this)

A simple way to get instant visual cues about your layout problems is to add borders around all your HTML elements, using CSS’s universal selector *

Add this at the top of your CSS stylesheet:


* { 
    border: 1px solid red; 
}

I did it on my own website and immediately recognized that my layout could need some adjustments.

Even if your layout doesn’t have any visual issues, this border trick can help to expose or point out things that could lead to issues down the road.

Edit

As ihab mentions in the comments, this can also be done with the outline property instead of the border property. It might be a better solution since outlines don’t take up space.


Has this been helpful?
Let me know in the comments!

Or share it with your friends :-)


ihab
10 months ago

I would like to use outlines instead of border because outlines don't take up space

David
10 months ago

You know what, that’s a very good point. Outlines might be a better alternative!

I edited my post. Thank you!

David
10 months ago

*