Understand the difference between block and inline elements

Block elements are elements that naturally clear each line after they are declared, spanning the whole width of the available space. On the other hand, inline elements take only as much space as they need and do not force a new line after they are used.

Examples of inline elements:

span, a, strong, em, img, br, input, abbr, acronym

Examples of block elements:

div, h1...h6, p, ul, li, table, blockquote, pre, form

It is important to note that:

• The block-level element cannot be nested inside an inline element.

• The inline element can be nested inside a block-level element.

• The inline and the block-level element can be nested inside the block-level element.