Divs

Divs spread to their surrounding area

first, red second, blue

Spans only enclose their inner elements/stuff

first second

but look what the line return does in the result, a space is addded (above)! Compare to this below, run together with no spaces.

firstsecond

Moving onto Margins

With no margin, divs spread out! Do you see the yellow background?

blue in the yellow, wow it took up all the space!

Here it is with some margins applied. Notice how you can see the background.

blue in the yellow, wow it took up all the space!

Paragraphs and other elements have default margins

a paragragh can screw you up if you're not expecting a margin on the top and bottom!

Padding comes after margin

Using padding. Look how it can break out of the div it is contained in and encroaches on this paragraph's default margin.

first second

Floats are handy, but considered outside the flow of the page

Use floats to hold in a specific area

first, floats are outside the page's flow, blue second, and they stack up, blue third, red

Or use margin-left!

first second