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
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.
