Inline Block in CSS Language
When it comes to styling web pages, CSS (Cascading Style Sheets) is an essential tool. CSS allows you to control the layout and presentation of HTML elements on your website. One commonly used display property value in CSS is inline-block. In this post, we’ll explore what inline-block is and provide examples to help you understand how to use it effectively.
What is inline-block?
The display property in CSS defines how an element is displayed on the web page. The inline-block value combines two distinct behaviors – the inline and block-level elements. An inline-block element behaves like an inline element but has the characteristics of a block-level element. This means that inline-block elements flow within the text, but they can have their own width and height, and you can apply margins and padding to them.
Using inline-block for Navigation Menus
One common use of inline-block is for creating horizontal navigation menus. In the following example, we’ll create a simple navigation menu using inline-block.
<!DOCTYPE html>
<html>
<head>
<style>
.nav {
list-style: none;
padding: 0;
}
.nav li {
display: inline-block;
margin-right: 20px;
}
</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>In this example, we’ve created a simple navigation menu using an unordered list (<ul>) and list items (<li>). By setting the display property of the list items to inline-block, they appear side by side horizontally, creating a navigation menu. The margin-right property adds spacing between the menu items.
Creating Grids with inline-block
Another use case for inline-block is creating simple grids. Suppose you want to display a collection of images or items in a grid-like layout. Here’s an example:
<!DOCTYPE html>
<html>
<head>
<style>
.grid {
font-size: 0; /* Remove white space between inline-block elements */
}
.grid-item {
display: inline-block;
width: 200px;
height: 200px;
margin: 10px;
background-color: #3498db;
}
</style>
</head>
<body>
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</body>
</html>In this example, we’ve created a grid layout by setting the display property of the grid items to inline-block. The font-size: 0; on the container removes the white space between items.
Discover more from PiEmbSysTech - Embedded Systems & VLSI Lab
Subscribe to get the latest posts sent to your email.
