CSS Layout – display: inline-block

The display: inline-block property in CSS is used to create elements that behave like inline elements, but also have a block-level width and height. This makes them ideal for creating layouts with inline elements that need to have specific dimensions.

When an element is set to display: inline-block, it behaves like an inline element in that it sits within the flow of text, but it also has a block-level box model, meaning that it can be given a width and height, as well as padding, margin, and borders.

Here’s an example of how display: inline-block can be used to create a set of boxes that are displayed inline:

<div class="box-container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin-right: 10px;
}

In this example, the div elements with the box class are set to display: inline-block, which allows them to be displayed in a row, with their block-level width and height respected. The width, height, background-color, and margin-right properties are also set to style the boxes and create some spacing between them.

Overall, the display: inline-block property is a useful tool for creating inline elements with block-level styling, but it’s important to be aware of the spacing issues that can arise from using this property, as well as the need to vertically align the elements using other techniques, such as setting their vertical-align property.