3

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?

Improve this question
3
  • 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
    Commented Jul 6, 2013 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.
    – user8795
    Commented Jul 9, 2013 at 22:20
  • 1
    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.
    – user8795
    Commented Jul 10, 2013 at 15:56

2 Answers 2

Reset to default
7

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

Improve this answer
1
  • The hover-following box guides Firefox displays on Ctrl+Shift+C are also very useful.
    – Beni Cherniavsky-Paskin
    Commented Mar 16, 2015 at 14:19
3

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.