Debugging CSS Layouts

 Posted on 2024-01-17  (Last modified on 2024-01-19)

When debugging issues with CSS layouts it can sometimes be tricky to really understand what is going on.

Using either your source code directly or the dev tools you can add this to any page:

* {
  outline: 1px solid red;
}

This adds a red outline to every element on the page (*).

Why Outline And Not Border?

It’s down to how the CSS box model works. Outline width does not affect the layout of elements according to CSS box-sizing rules, but border widths could!

If some elements are set to use box-sizing: border-box and other elements are using the default box-sizing: content-box, then the layout of those elements will respond differently to different border widths:

  • border-box includes border widths in the calculated width of the element
  • content-box adds border widths to the calculated element width
css  debugging 

See also