<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屬性，它可以讓元素在同一行上顯示，并保留塊級元素的寬度和高度。通過合理運用這個屬性，我們可以輕松創建出各種獨特的布局效果。