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.
Unlike block-level elements, inline elements do not start on a new line. They flow next to each others as long as there is room for them on the line. Their content width is that of the rendered content within them (before any relative offset of children).
The space in between the three
SPANs is due to the white space between them in the markup. Many authors remove this white space because it can create display issues (i.e., extra gaps between list items), but be aware that removing white space between inline elements can prevent User Agents from swaping the direction of the flow (i.e., from
Style the aqua box with:
Style the aqua box with (this breaks in IE 6):
text-indent: -50px; float: left;