假設我們有這樣一個HTML代碼：

<div class="box1">這是左邊的盒子</div>
<div class="box2">這是右邊的盒子</div>

我們要讓這兩個盒子水平對齊。那么我們可以使用CSS中的display屬性，將兩個盒子都設置為inline-block，使它們顯示為行內塊狀元素：

.box1, .box2 {
display: inline-block;
}

然而，這樣做還不夠。由于inline-block元素之間會產生一個空白的縫隙，如果我們不對其進行處理，則兩個盒子仍然會有一定的偏移。解決方法是，在父級元素上設置font-size: 0，然后在盒子上設置自定義的font-size即可消除縫隙：

.box-parent {
font-size: 0;
}
.box1, .box2 {
font-size: 16px;/*自定義的font-size*/
display: inline-block;
}

這樣，無論你修改盒子的寬度還是高度，兩個盒子都會水平對齊。