The third value for the display
property is inline-block
. Inline-block display combines features of both inline and block elements. Inline-block elements can appear next to each other and we can specify their dimensions using the width
and height
properties. Images are the best example of default inline-block elements.
For example, the <div>
s below will be displayed on the same line and with the specified dimensions:
Let’s take a look at the code:
<div class="rectangle"> <p>I’m a rectangle!</p> </div> <div class="rectangle"> <p>So am I!</p> </div> <div class="rectangle"> <p>Me three!</p> </div>
.rectangle { display: inline-block; width: 200px; height: 300px; }
There are three rectangular divs that each contain a paragraph of text. The .rectangle
<div>
s will all appear inline (provided there is enough space from left to right) with a width of 200 pixels and height of 300 pixels, even though the text inside of them may not require 200 pixels by 300 pixels of space.
Instructions
Let’s fix the display of the list elements in the menu at the top of the page.
Set the display
property of <li>
elements to inline-block
.
Set the width of the li
elements to 80 pixels.
Now, we can reduce the top offset of the “Welcome” section. Set it to 50 pixels.
Set the display
property of .answer
elements to inline-block
.