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.
For example, you might have the following HTML:
<div style="width:200px;margin:5px;border:solid thin black;">This is the first div. It's 200 pixels wide with a 5px margin around it.</div> <div style="width:390px;height:20px;margin:10;border:solid thin black;">This is a wider div.</div> <div style="width:400px;margin:15px;border:solid thin black;">This is a div that's a bit wider than the second one.</div>
Each div is a block element, so it will be placed below the previous block element. Each left outer edge will touch the left edge of the containing block.
Laying Out Inline Boxes
Inline boxes are laid out on the page horizontally, one after the other beginning at the top of the container element. When there isn't enough space to fit all the elements of the inline box on one line, they wrap to the next line and stack vertically from there.
For example, in the following HTML:
<p>This text is <b>bold</b> and this text is <i>italics</i>. And this is plain text.</p>
The paragraph is a block element, but there are 5 inline elements:
- "This text is "
- " and this text is "
- ". And this is plain text."