CSS: Inline-block

The inline-block value for the CSS display property allows you to create a layout where elements are displayed inline with one another but still retain their block-level characteristics. This means that unlike inline elements, inline-block elements can have a specified width and height, and their top and bottom margins and paddings are respected.

Here’s a quick rundown of the inline-block display value:

• Inline Characteristics: Elements with display: inline-block; sit next to each other on the same line, similar to span elements, as long as there is space in the container.
• Block Characteristics: Unlike display: inline;, inline-block elements respect the width and height properties. They also respect vertical margins and paddings, which are not respected by inline elements.
• No Line Break: inline-block elements do not add a line-break after the element, so they can sit next to other elements, unlike display: block; elements that always start on a new line.

Here’s an example to illustrate the use of inline-block:

CSS

.container {
  text-align: center;
}

.button {
  display: inline-block;
  width: 100px;
  padding: 10px;
  margin: 5px;
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  text-align: center;
}

/* The .button elements will be displayed inline with each other,
   but will also have the specified width, padding, and margin. */

This property is particularly useful for creating horizontally aligned menus or buttons without using floats or flexbox