The Difference Between Display Block And Display Inline

Some (most?) elements on a web page occupy a rectangular area of the page. Such elements can be block-level elements, or inline-level elements. There are other types that they can be, but this page will focus on just block-level and inline-level, because those two are perhaps the most common.

What is a block-level element?

A block-level element, by default, is an element that occupies a rectangular area of the page and is 100% as wide as the block that contains it. By default, any elements that are right before or right after a block-level element in the source code will appear above or below it, respectively. You will notice that this text is highlighted. It is in a div which is by default a block-level element. The highlighting is there to help illustrate the shape and nature of a block-level element.
This is a block-level element that appears immediately after the first div in the source code.

Additionally, if a block-level element has a top or bottom margin, those margins will distance the block-level element from elements above and below it, respectively. However, if the elements above and below the block-level element have their own margins that touch the block-level element, those vertical margins will "collapse," or, in other words, will overlap such that the space between the elements will only be as big as the largest margin between them.

Block-level elements can be made to float, but for float to have any actual effect on a block-level element, the block-level element must be given a width that is smaller than the block that contains it. If a block-level element is floating to the left, then any inline elements that appear after it in the source code will appear to the right of the floating block. Additionally, a block-level element that comes after the floating block will appear to the right of the floating block if its width is small enough to allow it to fit.

What is an Inline Element?

An inline element consists of lines that are tall enough to hold the tallest text or element inside of it. These lines wrap to the next line when they reach the right side of their containing block. An element that comes after an inline element in the source code will show up to the right of the last line of the inline element as long as it, too, is an inline element, or it is a block-level element that has a small enough width to fit after the last line of the inline element. You'll notice that this text is highlighted. It's in a span, which by default is an inline-level element. The highlighting demonstrates the shape of an inline element. This is another inline-level element that appears right after the previous one in the source code.