Display: How Elements are Rendered

Display: How Elements are Rendered

The display property and its values is very important to understand because it has a pretty big impact on how elements interact with each other on the page and how they are rendered.

Let's go over the main values for display, using this HTML document as our base:

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Display</title>
			<style>
				div {
					background-color: blue;
				}
				span {
					background-color: lightblue;
					padding: 0 0.5rem;
				}
			</style>
		</head>
		<body>
			<div>
				<span>How</span>
				<span>cool</span>
				<span>is</span>
				<span>Sabe?</span>
			</div>
		</body>
	</html>
	
Default display value for span tags.
Default display value for span tags.

Display: None

This is the easiest one. If you set the display value to none, it will simply not appear at all.

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Display: None</title>
			<style>
				div {
					background-color: blue;
				}
				span {
					background-color: lightblue;
					padding: 0 0.5rem;
					display: none;
				}
			</style>
		</head>
		<body>
			<div>
				<span>How</span>
				<span>cool</span>
				<span>is</span>
				<span>Sabe?</span>
			</div>
		</body>
	</html>
	
Now you see me. Now you don't.
Now you see me. Now you don't.

Display: Inline

Now if you recall from our HTML lesson, span tags are, by default, rendered inline. This means that applying a display value of inline will essentially do nothing, however if you were to apply it on a div tag, it will be rendered inline.

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Display: Inline</title>
			<style>
				div {
					background-color: blue;
				}
				span {
					background-color: lightblue;
					padding: 0 0.5rem;
				}
			</style>
		</head>
		<body>
			<div>
				<span>How</span>
				<span>cool</span>
				<span>is</span>
				<span>Sabe?</span>
			</div>
		</body>
	</html>
	
The span tags are being rendered inline inside the div tag.
The span tags are being rendered inline inside the div tag.

Display: Block

Setting an element's display value to block will make it render as a block and inherit all of the characteristics that comes with being a block.

This is where things get interesting. While normally rendered inline, watch what happens when we set the span tags to render as a block like div tags usually do:

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Display: Block</title>
			<style>
				div {
					background-color: blue;
				}
				span {
					background-color: lightblue;
					padding: 0 0.5rem;
					display: block;
				}
			</style>
		</head>
		<body>
			<div>
				<span>How</span>
				<span>cool</span>
				<span>is</span>
				<span>Sabe?</span>
			</div>
		</body>
	</html>
	
Span tags rendered as blocks.
Span tags rendered as blocks.

Noticed the difference this time?

Because our span tags are now rendered as a block, they individually take up 100% of the width of their parents, and thus you now see light blue covering where there used to be dark blue.

The div is still there, you just don't see it because each of its children are now taking up all the space inside of it, along with their lighter background color.

Display: Inline Block

Inline blocks is essentially taking a block and making it render inline. By setting the display property to inline-block, the element shares characteristics from both values.

You can, for example, manipulate the block's height, while remaining inline:

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Display: Inline Block</title>
			<style>
				div {
					background-color: blue;
				}
				span {
					background-color: lightblue;
					padding: 0 0.5rem;
					display: inline-block;
				}
				span:nth-child(1) {
					height: 1rem;
				}
				span:nth-child(2) {
					height: 2rem;
				}
				span:nth-child(3) {
					height: 3rem;
				}
				span:nth-child(4) {
					height: 4rem;
				}
			</style>
		</head>
		<body>
			<div>
				<span>How</span>
				<span>cool</span>
				<span>is</span>
				<span>Sabe?</span>
			</div>
		</body>
	</html>
	
You have to admit, that's pretty cool.
You have to admit, that's pretty cool.

Each individual span tag had its height adjusted like a block, but it remained rendered inline. The power of inline-block!

In our next lesson, we will follow up our newly-gained knowledge of how to take advantage of how display works by learning how to properly layout our pages!