全寬vs方框

(本篇未經響應式處理，請以電腦版觀看方有效果)

▼如何做出左右置中(左右留白)且中間有背景色區塊？

▼方框80%
(方框加背景色無法形成「背景色區塊」，背景色會充滿左右滿版)

▼全寬80%
(全寬加背景色可以形成「背景色區塊」，且外距(即邊界)是大於等於0時，會無法左右置中)

▼想要這樣
(背景色區塊且可以任意設定外距(邊界)且左右水平置中)

作法 :

①多拉一個容器(不分全寬或方框)當外層容器;

②把原本的整個容器置入外層容器;

③使用外層容器的置中對齊功能即可。

反正只要最外層多包一個容器，就可以使用外層控制內層的對齊功能讓被包的小容器做水平置中。(甚至可靠右、靠下等多種對齊方式)

比較 :

全寬與方框最大差別:

1、左右置中

方框本身就可以左右置中。
全寬本身就可以左右置中，但若把外距(即邊界)設定數值就失去置中功能。

2、背景色

方框加了背景色，背景色會超出寬度左右延伸至滿版。
全寬加了背景色，背景色會符合寬度。

換言之，不加背景色則選全寬或方框都可。

※結論:一律養成多加一層外容器的習慣，就什麼事都沒有，即可任意控制。

如果不想包最外層，全寬且預設外距(不設值)才會自動左右置中。