一般網頁元素的預設樣式幾乎不是 block 就是 inline，這兩個的特性如下：
block
元素會佔用父元素（或瀏覽器視窗）一整行的寬度，可以設定寬度和高度。
inline
會佔用顯示內容所需的空間，後面的元素會緊鄰在後。inline 元素的寬度和高度是由內容決定的，無法隨意控制。通常跟文字相關的元素多屬這種屬性。
那如果想要設定寬度和高度，又不希望元素佔用整個水平空間怎麼辦？這就需要第3種排列設定： Inline-block
Inline-block
元素作用類似 block 元素，你對它的尺寸有絕對的掌控權，但是它不會佔用整個水平空間，可以彼此相鄰。
設定方法只要變更display屬性即可
{
display: inline-block;
}