Block boxes are laid out vertically in sequence, starting at the top left of the containing block and continuing down its left edge. Block boxes are separated vertically by their margins, which may overlap or "collapse".
Inline boxes are laid out horizontally in sequence, starting at the top left of the containing block.
Text that is not already inside an inline box gets an anonymous inline box generated around it.
When an inline box wraps, its margins, borders, and padding wrap with it, and have no visible effect at the wrap point. E.g. The code:
<p style='width: 16em; font-family: monospace; border: 1px solid black; padding: .5ex;'>
There are two
<em style='border: 2px dotted red'>emphasized words</em>
in this paragraph.
</p>renders like this:
There are two emphasized words in this paragraph.