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.
Post a Comment