Menu
Dark mode
Dark code
HTML CSS
SolarWinds® Service Desk
OPEN
Download The Competitor Report
CSS Layout - display: inline-block
❮ Previous Next ❯
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;
Try it Yourself »
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;
}
» Try it Yourself
❮ Previous ❯ Next
daDoG
ADVERTISEMENT
™yddaDoG
دعنا ننشر
موقعك
على
اإلنترنت.
خبراؤنا األذكياء
والودودون موجودون
لمساعدتك في نشر
فكرة أعمالك عبر
اإلنترنت.
™GoDaddy
معلومات أكثر
NEW
We just launched
W3Schools videos
Explore now
COLOR PICKER
Get certified
by completing
a CSS
course today!
school
w3 s
2
CE
02
TI 2
R
FI .
ED
Get started
CODE GAME
Play Game
ADVERTISEMENT
وقعك على الإنترنت.
دون موجودون لمساعدتك في نشر فكرة أعمالك عبر الإنترنت.
معلومات أكثر
ADVERTISEMENT
Report Error
Spaces
Pro
Buy Certificate
Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial
Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
Top Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
Java Examples
XML Examples
jQuery Examples
Get Certified
HTML Certificate
CSS Certificate
JavaScript Certificate
Front End Certificate
SQL Certificate
Python Certificate
PHP Certificate
jQuery Certificate
Java Certificate
C++ Certificate
C# Certificate
XML Certificate
FORUM |
ABOUT
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials,
references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.
While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Copyright 1999-2022 by Refsnes Data. All Rights Reserved.
W3Schools is Powered by W3.CSS.
