: How to visually display css blocks for debugging After lots of confusion and wasted effort I once learned that css also had this lines concept that everything else followed regardless of it

@Kevin459

If it's visual representations of elements you're looking for, nothing beats Firefox's 3D view.

Open Firefox, press F10 to show the toolbar if necessary, go to tools, hover over web developer and get familiar with all those awesome tools.

To open the 3D view, make sure the console is visible by selecting one of the options in the web developer menu such as Web Console, then select the icon over on the right that looks like this:



It will give you a 3D view of all the elements on the page, including what's inside what, etc.

It's great for a visual representation of your website structure.

Here's an example:

Vote Up Vote Down

@Nimeshi706

I'm not sure I quite understand your question. I assume you are looking for a way to see what space certain elements are taking up, visually.

If so, then yes, that's very possible to do. All major browsers (as far as I'm aware) have a console built in.

In both Chrome and Firefox you can right-click and Inspect Element which will open the console. Alternatively you may press F12, though for this to work in Firefox you'll need to install the custom console, Firebug (which I highly recommend).

In Internet Explorer you may also use F12 or go to the settings menu and open Developer Tools.

The console let's you examine HTML elements on the page and shows you what space things take up. It will also allow you to modify live CSS and you can see the changes as you make them (though it will not save them).

Here's an example using Chrome (you can also right-click and select Inspect Element):


The blue is the actual content, the green is the padding, and the red is the margin.

Vote Up Vote Down