Techstacker
Light ModeDark ModeReset dark mode. Falls back to OS dark mode setting.

Pages

No results for 'undefined'

Blog Posts

No results for 'undefined'
Powered by Algolia

CSS Workflow, Use Borders for Debugging Your Layouts Fast

Jan 5, 20181 min readCSS, DesignViews:

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.

Screenshot showing red borders around the elements on TechStacker’s front page.

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.


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

Or share it with your friends :-)


© 2019 - TechStacker
Powered byGatsbyGithubNetlify