Learn

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:

inline block example

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

1.

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.

2.

Set the width of the li elements to 80 pixels.

3.

Now, we can reduce the top offset of the “Welcome” section. Set it to 50 pixels.

4.

Set the display property of .answer elements to inline-block.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?