CSS display: inline-block
Features of inline and block elements come together in the display: inline-block declaration.
Such an element shares a line with neighbors that are inline or inline-block, yet it accepts width, height, margin-top, and margin-bottom the way a block element does.
Example
Here display: block is compared with display: inline and display: inline-block.
Prompt
Show the difference between display: inline, display: inline-block, and display: block using three span elements. The inline span has padding and a red border. The inline-block span has width 100px, height 35px, padding 5px, and a red border. The block span has the same dimensions and border as inline-block.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline vs Inline-Block vs Block</title>
<style>
span.a {
display: inline;
padding: 5px;
border: 2px solid red;
}
span.b {
display: inline-block;
width: 100px;
height: 35px;
padding: 5px;
border: 2px solid red;
}
span.c {
display: block;
width: 100px;
height: 35px;
padding: 5px;
border: 2px solid red;
}
</style>
</head>
<body>
<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="a">Aliquam</span> <span class="a">volutpat</span> Donec et nisl at wisi luctus bibendum.</div>
<h2>display: inline-block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="b">Aliquam</span> <span class="b">volutpat</span> Donec et nisl at wisi luctus bibendum.</div>
<h2>display: block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="c">Aliquam</span> <span class="c">volutpat</span> Donec et nisl at wisi luctus bibendum.</div>
</body>
</html>
Create a Horizontal Navigation Menu
List items normally stack vertically, and display: inline-block is often used to lay them out horizontally instead.
Example
Applying display: inline-block to the list items turns them into a horizontal navigation menu.
Prompt
Create a horizontal navigation menu using an unordered list with display: inline-block on the list items. The menu has a light gray background, no list-style, no padding/margin on the ul, and each li has 18px font-size and 15px padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Navigation Menu</title>
<style>
.nav {
background-color: lightgray;
list-style-type: none;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 18px;
padding: 15px;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>