Scribd
Upload
9 views

CSS Layout inline-block

Uploaded by

nonocex510
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

CSS Layout inline-block

Uploaded by

nonocex510
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

CSS Layout - display: inline-block

The display: inline-block Value

Compared to display: inline, the major difference is that display: inline-block


allows to set a width and height on the element.

Also, with display: inline-block, the top and bottom margins/paddings are
respected, but with display: inline they are not.

Compared to display: block, the major difference is that display: inline-block


does not add a line-break after the element, so the element can sit next to
other elements.

The following example shows the different behavior of display: inline, display:
inline-block and display: block:

Example

span.a {

display: inline; /* the default for span */

width: 100px;

height: 100px;

padding: 5px;

border: 1px solid blue;

background-color: yellow;

}
span.b {

display: inline-block;

width: 100px;

height: 100px;

padding: 5px;

border: 1px solid blue;

background-color: yellow;

span.c {

display: block;

width: 100px;

height: 100px;

padding: 5px;

border: 1px solid blue;

background-color: yellow;

ADVERTISEMENT

Using inline-block to Create Navigation Links

One common use for display: inline-block is to display list items horizontally
instead of vertically. The following example creates horizontal navigation
links:
Example

.nav {

background-color: yellow;

list-style-type: none;

text-align: center;

padding: 0;

margin: 0;

.nav li {

display: inline-block;

font-size: 20px;

padding: 20px;

You might also like