Inline elements and block level elements

<b>Block-level elements</b> are formatted visually as blocks, they have a definable width and height and automatically create a new row in the layout as they’re created.

<b>Inline elements</b> are displayed inside the current block on the same line. They don’t have a definable height and width and will not create new rows in a layout.

<b>Common block level elements</b>

<button>    push button
<caption>   table caption
<div>   generic language/style container
<form>  interactive form
<h1>    heading
<h2>    heading
<h3>    heading
<h4>    heading
<h5>    heading
<h6>    heading
<hr>    horizontal rule
<iframe>    inline subwindow
<li>    list item
<map>   client-side image map
<object>    generic embedded object
<ol>    ordered list
<p> paragraph
<pre>   preformatted text
<table> table
<tbody> table body
<td>    table data cell
<tfoot> table footer
<th>    table header cell
<thead> table header
<tr>    table row
<ul>    unordered list

<b>Common inline elements</b>

<a> anchor
<acronym>   acronym
<b> bold text style
<br>    forced line break
<cite>  citation
<em>    emphasis
<i> italic text style
<img>   Embedded image
<input> form control
<ins>   inserted text
<label> form field label text
<q> short inline quotation
<select>    option selector
<small> small text style
<span>  generic language/style container
<strong>    strong emphasis
<textarea>  multi-line text field

<b>Dimensions for inline elements</b>

<b>Width</b>

For Inline, non-replaced elements, the ‘width’ property does not apply.

<b>Height</b>

For Inline, non-replaced elements, the ‘height’ property doesn’t apply, but the height of the box is given by the ‘line-height’ property.

<b>Padding</b>

Padding can be applied to all sides of an inline element, but only left and right padding will have an effect on surrounding content.

<b>Margins</b>

Margins can be applied to all sides of an inline element, but only left and right margin will have an effect on surrounding content.