在CSS布局設計中,有時候需要讓內容左右兩側留出一些空白,以突出內容或美化頁面。下面我們來看一下左右留空的實現方法。
/* * 留出左右空白 */ .box { width: 80%; margin: 0 auto; padding: 0 10%; } /* * 定寬居中+留出左右空白 */ .box { width: 960px; /* 假設容器寬度為960px */ margin: 0 auto; padding: 0 40px; /* 假設左右留空40px */ }
上面的代碼分別實現了兩種方式。第一種是通過設置容器的寬度為80%,并同時設置左右padding值為10%實現。第二種是先給容器設置一個固定寬度,再通過設置padding來留出左右空白。
值得注意的是,如果您的網站需要適應不同的屏幕大小,建議使用百分比寬度的方式,因為這樣不僅能夠適應不同屏幕大小,還能夠保持布局一致性。如果您的網站采用了響應式布局,那么留白的大小也可以通過media query來進行調整。
當然,以上只是CSS布局留白的基本方法,具體的應用還需要根據您的具體需求來進行選擇。但無論如何,在網頁設計中留出左右空白的設計都是非常常見和實用的一種布局方式。
下一篇css布局垂直文本