Categories
CSS inline-block is a display property value that combines characteristics of both inline and block-level elements. When you set an element's display to inline-block, it allows the element to flow inline with text and other inline elements while also respecting height and width properties like a block-level element.
Here's how to use inline-block:
1. Basic usage:
HTML:
<div class="box">
This is an inline-block element.
</div>
CSS:
.box {
display: inline-block;
width: 200px;
height: 100px;
background-color: lightblue;
border: 1px solid darkblue;
}
In this example, we create a div element with the class "box" and set its display property to inline-block. This makes the box flow inline with surrounding text or other inline elements, and it respects the specified width and height. The background color and border are applied as well.
2. Creating a horizontal menu:
HTML:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
CSS:
nav ul {
padding: 0;
margin: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 10px;
}
nav li a {
display: block;
padding: 5px 10px;
background-color: lightblue;
text-decoration: none;
color: darkblue;
}
In this example, we create a simple horizontal navigation menu using inline-block. The list items (li) are set to display: inline-block, which makes them appear side by side. The anchor elements (a) inside the list items are styled as blocks to create clickable elements with padding and background color.
3. Creating a responsive grid:
HTML:
<div class="grid">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
CSS:
.grid {
width: 100%;
}
.grid-item {
display: inline-block;
width: 30%;
height: 100px;
background-color: lightblue;
margin: 10px;
box-sizing: border-box;
}
In this example, we create a responsive grid layout using inline-block. The grid items are set to display: inline-block, and we use percentage-based widths to make them responsive across different screen sizes.
Keep in mind that when using inline-block, there might be some white space between elements due to the natural spacing between inline elements in HTML. To remove this whitespace, you can set the font size of the parent container to zero, or you can remove line breaks and spaces in the HTML code between inline-block elements.
CSS inline-block is a useful display property for creating various layouts and component designs, especially when you need elements to flow inline while still having block-level characteristics. However, newer layout techniques like Flexbox and CSS Grid offer more powerful and flexible options for creating complex layouts, and you should consider using them for modern web development.