Learn
CSS Display and Positioning
Inline-Block Display

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, <div>s in the CSS below will be displayed on the same line and with the specified dimensions:

<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; }

In the example above, 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 <li> tags 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.

Folder Icon

Take this course for free

Already have an account?