CSS Inline-block is a display property that allows elements to be displayed as inline-level blocks. This means that the element will flow with the text and other inline elements, but will also have the properties of a block-level element, such as the ability to set a width and height, and to add padding and margins.
Inline-block is a useful display property for creating layouts that require elements to be positioned next to each other, while still maintaining their block-level properties. It is commonly used for creating navigation menus, image galleries, and other types of content that require elements to be displayed in a row or grid.
Here are some examples of how to use CSS Inline-block:
To create a navigation menu using CSS Inline-block, you can use the following code:
<ul style="list-style:none;">
<li style="display:inline-block; padding:10px;">Home</li>
<li style="display:inline-block; padding:10px;">About</li>
<li style="display:inline-block; padding:10px;">Contact</li>
</ul>
In this example, we have created an unordered list and set the list-style to none to remove the bullet points. We have then set the display property of each list item to inline-block, which allows them to be displayed next to each other. We have also added padding to each list item to create some space between them.
To create an image gallery using CSS Inline-block, you can use the following code:
<div style="text-align:center;">
<img src="image1.jpg" style="display:inline-block; width:200px; height:200px; margin:10px;">
<img src="image2.jpg" style="display:inline-block; width:200px; height:200px; margin:10px;">
<img src="image3.jpg" style="display:inline-block; width:200px; height:200px; margin:10px;">
</div>
In this example, we have created a div container and set the text-align property to center to align the images in the center of the container. We have then added three images and set their display property to inline-block, which allows them to be displayed next to each other. We have also set the width and height of each image and added some margin to create some space between them.
To create a form using CSS Inline-block, you can use the following code:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" style="display:inline-block; width:200px; margin:10px;">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" style="display:inline-block; width:200px; margin:10px;">
<br>
<label for="message">Message:</label>
<textarea id="message" name="message" style="display:inline-block; width:200px; height:100px; margin:10px;">
<br>
<input type="submit" value="Submit" style="display:inline-block; margin:10px;">
</form>
In this example, we have created a form and added three input fields and a textarea. We have set the display property of each input field and textarea to inline-block, which allows them to be displayed next to each other. We have also set the width and height of each input field and textarea and added some margin to create some space between them. Finally, we have added a submit button and set its display property to inline-block.
CSS Inline-block is a useful display property for creating layouts that require elements to be positioned next to each other, while still maintaining their block-level properties. It is a versatile property that can be used for a variety of purposes, including navigation menus, image galleries, and form input fields.