Cloud Entertainment Facebook General Life Programming Technology Testing Tools Twitter Wearable Web Design

"display: inline-block" CSS Property

Q

What is "display: inline-block"? How to use it on block elements?

✍: FYIcenter.com

A
"display: inline-block" is a CSS property that changes the current element to be an "inline-block" element.

An "inline-block" element will be displayed inline with other sibling elements. But itself will be maintained as a block respecting the block box model.

The "display: inline-block" property is very useful for displaying a set of block elements horizontally and allowing the browser to wrap them based on the width of the parent element. This makes your Web page responsive to the device size.

Here is an example to compare "display: inline-block" with "display: inline" and "display: block".

1. Using "display: inline-block" for 5 div blocks:

Box 1
Box 1
Box 2
Box 2
Box 3
Box 3
Box 4
Box 4
Box 5
Box 5

2. Using "display: inline" for 5 div blocks:

Box 1
Box 1
Box 2
Box 2
Box 3
Box 3
Box 4
Box 4
Box 5
Box 5

2. Using "display: block" for 5 div blocks:

Box 1
Box 1
Box 2
Box 2
Box 3
Box 3
Box 4
Box 4
Box 5
Box 5

2015-05-17, 752👍, 0💬

Cloud Entertainment Facebook General Life Programming Technology Testing Tools Twitter Wearable Web Design