Block-level and inline elements

How an element can be styled depends on its default, either as block-level (put on a new line to take the whole horizontal space, with a default width of 100 percent) or inline (sharing a line with other elements). We will point out various ways in which these types of elements behave differently.

Examples of block-level elements include:

• the paragraph element
• heading elements
• the division element
• the table element
• the ordered list element
• the unordered list element
• the list item element

Examples of inline elements include:

• the hyperlink element
• the image element
• the span element
• the table data element
• forms, which we will discuss later

Changing the default is also possible; for example, one might use inline to make list items appear horizontally, such as for a horizontal menu. The display property (display) can take values inline, block, inline-block (not discussed here), and none (which results in the element not being displayed).

It might seem strange to have a value that indicates that an element should not appear. This is of use when writing programs to change the appearance of a page: changing the value of the display property can be used to make an element appear or disappear. Another alternative is to use the visibility property (visibility) to make the content appear (value visible) or disappear (value hidden).