An easier way to see your elements and how they occupy the page.

Question

I was looking for a way to see the elements and how/where they appear on the page

without getting different software (I use Notepaad++) or using a website builder. I

remembered a tip I wrote to myself one day studying. I told myself to use

outline-style: dotted;/*remove after finished*/

in my CSS to outline each <div> and other <elements>. This way, I see the space it takes

up, how it sits with the other elements, margin/padding, and just an overall realistic visual.

I recommend using this tip when building/updating a page or site. NOTE: It's easy to remove all of them

using the FIND & REPLACE option (CTRL + F).

© Go Code Something!

Answer 1

Also, if you're using a web browser like Chrome or Firefox to view the finished result, you can open up the developer tools, as it detects when an element has children and allows you to collapse it, which gives you a better visualization.