CSS Display Property

Block level elements start and end with a newline and take up the width of the screen. By default, <div>, <h1>, ..., <h6>, and <p> are block level elements.

Inline elements do not start on a new line and take up only as much space as needed (CSS margins and height will be ignored). By default, <span>, <a> and <img> are inline elements.

Inline-block elements are like inline elements but the height, width, margins, and padding, can be modified

Comparison between block, inline, and inline-block displays

The divs below have the following styles, but differ with respect to their display properties:

div.one {
	height: 30px;
	background-color:pink;
}
div.two {
	height: 50px;
	background-color:lightblue;
}

Two divs using the default block display (where height can be changed)

Two divs using the inline display (note that the height property is not honored, and the divs are on the same line)

Two divs using an inline-block display (height can be changed, the divs are still on the same line)