Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

After lots of confusion and wasted effort I once learned that css also had this lines concept that everything else followed regardless of it being text or not. And that each line can be varied, be of different heights, and is the main culprit behind vertical align being so hard since everything else follows its line. Just like how things work in Ms Word.

Is there a way to show those imaginary lines when trying to do something in css?

share|improve this question
1  
Word uses a carriage return or line feed for a new line. In CSS a new line is merely the next pixel down. line-height in CSS can be set to whatever you want it to be. jsfiddle.net/NotInUse/bQ9aV/1 –  Scott Jul 6 '13 at 19:30
    
All elements that are not block element follow the lines. And an element that's inline-block element if is bigger than the height of the line will auto increase the line. Some othe rules as well...but i am asking is their a way to visualize lines. –  Muhammad Umer Jul 9 '13 at 22:20
    
yes i haven't found anything more, but look if you have paragraph with line height of say 20px; then you insert some element at line 4 and make it display:inline-block; and make it 50px high. Now obviously line height of that line has changed. So is there a tool that shows baseline vs line height etc. –  Muhammad Umer Jul 10 '13 at 15:56

2 Answers 2

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): enter image description here

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

share|improve this answer

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:

Firefox 3D View Icon

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:

This Question Page, Firefox 3D View

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.