Inline and Block and Inline Block

Let’s start with a few basics.

Inline elements are as wide as their content, and their dimensions cannot be set with CSS.

<span style="border: solid 1px red; width: 500px;">This is an inline element.</span>

Block elements span the width of their container by default but can have their dimensions set with CSS.

<div style="border: solid 1px red; width: 500px;">This is an block element.</div>

Inline-block elements by default are as wide as their content, but their dimensions can be set with CSS.

<div style="border: solid 1px red; display: inline-block;">This is an block element, but changed to inline-block.</div>

Exercise:

Take this sample and turn it into an horizontal menu.