Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). Several values of the ‘display’ property make an element inline: ‘inline’, ‘inline-table’, ‘inline-block’ and ‘run-in’ (part of the time; see run-in boxes). Inline-level elements generate inline boxes.
Vertical margin, border and padding do not play a role in the flow. Only horizontal values do. The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, not the ‘line-height‘.
If the yellow box overlaps the previous box, but not the following one, it is not only because of source order. To find out how elements stack see: z-index.
Vertical margin, border and padding on inline elements may trigger scrolling mechanisms.
In IE 6 and 7, the yellow box is clipped by its containing block.
Style the yellow box with: