inline-level elements

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 ltr to rtl).

Style the aqua box with:

	text-indent: -50px;

Style the aqua box with (this breaks in IE 6):

	text-indent: -50px;
	float: left;

Try These

Watch This

aqua yellow pink

Check This

<span id="aqua">aqua</span> <span id="yellow">yellow</span> <span id="pink">pink</span>

Edit This

Use shift + enter to create new lines (even in Safari and Chrome).