Previous
Written by: rJTutorial Team | Last Updated:

CSS Inline-block

The inline-block value for the CSS display property is essentially a hybrid between inline and block. It allows you to create a layout where elements sit side-by-side on the same line (like text) but still retain the powerful sizing capabilities of block-level elements. This is incredibly useful when you need a row of elements like navigation links or gallery items that require specific widths, heights, or vertical spacing.

Developer Tip: Think of inline-block as a "best of both worlds" tool. Use it when you want the flow of text but the structural control of a div.

Here’s a quick rundown of why the inline-block display value is so effective:

  • Inline Characteristics: Elements with display: inline-block; flow horizontally. They will sit next to each other on the same line, just like <span> tags or standard text, as long as the parent container has enough horizontal width to hold them.
  • Block Characteristics: Unlike standard inline elements, inline-block elements fully respect the box model. You can explicitly set a width and height, and more importantly, their top and bottom margins and paddings will push other elements away as expected.
  • No Line Break: A standard block element (like a <div> or <p>) automatically starts on a new line and takes up the full width available. inline-block skips this behavior, allowing multiple elements to share the same horizontal space without forcing a break.
Watch Out: One quirk of inline-block is that it treats the white space in your HTML (like tabs or new lines between tags) as a literal space character. This often results in a small 4px-5px gap between your elements. To fix this, you can set the parent's font-size to 0 or remove the spaces between the HTML tags.

Here’s a practical example showing how to create a simple button row using inline-block:

CSS

.container {
  /* Centering the inline-block children within the parent */
  text-align: center;
  background-color: #eee;
  padding: 20px;
}

.button {
  display: inline-block;
  width: 120px;
  height: 45px;
  line-height: 45px; /* Centers text vertically */
  margin: 10px;
  padding: 0 15px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  text-align: center;
  transition: background 0.3s ease;
}

.button:hover {
  background-color: #0056b3;
}

/* 
   These .button elements will align horizontally. 
   If the screen gets too narrow, they will wrap to the 
   next line automatically, maintaining their dimensions. 
*/
Common Mistake: Beginners often try to apply margin-top or margin-bottom to a standard inline element (like a <span> or <a>) and wonder why it doesn't move. You must switch to display: inline-block; for vertical margins to take effect.

This property is particularly useful for creating horizontally aligned menus, pagination links, or product grids without the complexity of CSS floats or the overhead of a full Flexbox grid when a simple flow is all you need.

Best Practice: When using inline-block for a row of items, use the vertical-align property (usually set to top or middle). Because inline-block elements are treated like text, they default to baseline alignment, which can cause elements of different heights to look unaligned.
Previous