? inline-block in CSS

The inline-block value for the display property lets an element flow inline like text but behave like a block in terms of box model (width, height, padding, margin).

What does inline-block do?

• Elements sit next to each other horizontally (like inline).

• You can set width, height, padding, and margin (like block).

• Does not start on a new line.

• Respects vertical-align for alignment with other inline elements.

Example

<span class="box">Box 1</span><span class="box">Box 2</span><span class="box">Box 3</span>

.box {  display: inline-block;  width: 100px;  height: 50px;  background-color: #4caf50;  color: white;  text-align: center;  line-height: 50px; /* vertical center */  margin: 5px;}

This shows 3 colored boxes side by side with width and height.

Why use inline-block?

• You want elements side-by-side but need to control their box dimensions.

• Useful for navigation links, buttons, image galleries, form inputs alignment.

• Unlike inline, you can set box size.

Important Notes

• Whitespace (spaces, newlines) between inline-block elements in HTML creates small gaps in layout.

• Can be controlled by removing spaces in HTML or CSS tricks (font-size: 0 on parent).

Want me to show you tricks to handle spacing issues with inline-block or examples with menus or buttons?