Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
9 views

CSS Layout inline-block

Uploaded by

nonocex510
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

CSS Layout inline-block

Uploaded by

nonocex510
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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