<style> .box { display: inline-block; width: 200px; height: 200px; background-color: lightblue; margin: 10px; } </style>

CSS中的display: inline-block属性是一种用于布局的高效工具，它可以让元素在同一行上显示，并保留块级元素的宽度和高度。这意味着我们可以方便地创建一组排列紧凑的元素，并且可以对它们进行更灵活的定位和样式设定。

下面是一些使用display: inline-block的代码案例：

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

在上面的代码中，我们创建了三个具有相同类名的<div>元素，并且为它们设置了相同的样式。由于使用了display: inline-block，这三个元素将会在同一行上以块级的方式显示，且宽度和高度都为200像素。

除了以上的基本布局，display: inline-block还可以用于创建其他复杂的布局效果，例如：display: inline-block可以与vertical-align属性一起使用，实现垂直居中的效果。

<div class="parent">
<div class="child"></div>
</div>

在上述代码中，我们先创建了一个具有类名为parent的<div>元素，然后再创建一个具有类名为child的<div>元素。我们将父元素的display属性设置为inline-block，并使用vertical-align: middle将其子元素在垂直方向居中对齐。

来说，display: inline-block是一种非常有用的CSS属性，它可以让元素在同一行上显示，并保留块级元素的宽度和高度。通过合理运用这个属性，我们可以轻松创建出各种独特的布局效果。