White Space and Flow

Whitespace

With only a few exceptions, HTML treats whitespace characters (spaces, tabs, and newlines) differently from ordinary characters. In general, a single whitespace character--including newlines--or a sequence of whitespace characters are treated as a single space and leading/trailing whitespace is eliminated. This is known as 'collapsing whitespace'. Therefore the following two paragraphs are treated as if they were identical

                                       


Now is the
    time
       for


        all
                        good
        birds           to
        to fly the edge of the world and take a look over the edge

    

Now is the time for all good birds
to to fly the edge of the world
and take a look over the edge

They are rendered, respectively

Now is the time for all good birds to to fly the edge of the world and take a look over the edge

Now is the time for all good birds to to fly the edge of the world and take a look over the edge

Most of the time whitespace isn't important to the author, and this markup behavior gives the author considerable flexibility. It makes markup simpler to write and, if used effectively, easier to read as well. For example, you can leave a blank space between paragraphs and around headings or, if you like indent the text marked by subheadings to make it clear how (to you, the reader doesn't see the source document unless he/she makes a special effort to read it) the document is structured, eg:

    
How to do things good

    
I like to do things this way

        
How other people do things

        
Other people do things differently

    
How to do things better

    
Do things some other way, and if it's not better, repeat

The rules also permit--but certainly do not require--you to place tags on a line by themselves if you like, and to start every element on it its own line. For example

Para 1
Para 2
Address 1

is identical to

    

    Para 1
    

    

    Para 2
    

    

    Address 1
    

Normal flow is the way that elements are displayed in a Web page in most circumstances. All elements in HTML are inside boxes which are either inline boxes or block boxes.

Normal flow is the way that elements are displayed in a Web page in most circumstances. All elements in HTML are inside boxes which are either inline boxes or block boxes.
Laying Out Block Boxes

In normal flow, block boxes are positioned on a page one after the other (in the order they're written in the HTML). They start in the upper left of the containing box and stack from top to bottom. The distance between each box is defined by the margins with top and bottom margins collapsing into one another.