CSS 照片左右空隙指的是圖片在容器中居中顯示并且左右兩邊留有空白間隔的布局方式。
.container { width: 600px; margin: 0 auto; text-align: center; } .container img { display: inline-block; margin: 0 20px; }
上面的示例代碼中,我們定義了一個(gè) class 為 container 的容器,并將其寬度設(shè)為 600 像素,并通過 margin 屬性和 text-align 屬性實(shí)現(xiàn)了容器居中對(duì)齊。
針對(duì)容器中的圖片,我們通過給 img 元素添加 display: inline-block; 實(shí)現(xiàn)了圖片像文字一樣的排列方式,使其能夠在同一行上顯示。
之后,我們給圖片左右兩邊添加了 20 像素的 margin,從而實(shí)現(xiàn)了圖片在容器內(nèi)的居中對(duì)齊,并在兩側(cè)留出了等量的空白區(qū)域。
通過這種方式,我們可以輕松實(shí)現(xiàn)照片左右空隙的布局效果,讓網(wǎng)頁更加美觀和易讀。