在頁面布局的時候遇到一個問題在此記錄。

有如下布局需求。頁面上大多數都是這樣的，一塊一塊從上到下排列。

塊與塊之間的間距需要固定由誰來負責。例如第一個塊和第二個塊之間的間距，就需要第二個塊的margin-top完成，文字和第二個塊之間的間距由文字的margin-top來完成。這樣做的好處是，如果這些塊少了一個也不會破壞頁面布局。如果，不固定，這個間距一會由上面的margin-bottom，一會由下面的margin-top實現，那么布局就相對不穩定。如果一個元素某些情況不可見，并且自己實現了上下間距，那么元素不可見的時候相鄰上下兩個元素就會挨在一起，顯然這是有問題的。

當然不一定非要固定為margin-top，margin-bottom也可以。

還有一個問題，當固定間距為margin-top的時候，有可能并不能完全滿足需求。例如上面的第一行文字和最后一行文字和按鈕的關系在某種情況下就很微妙。

我希望第一行文字消失的時候按鈕和上面塊的間距保持為第一行文字和上面塊的間距。并且，第二行字消失的時候按鈕和下面距離保持為第二行字和下面塊的距離。

如果第一行文字和上面塊的間距由自己的margin-top實現，按鈕和第一行文字的間距是按鈕的margin-top，那么如果第一行文字消失按鈕就會挨著上面的塊顯然不對。這時候就需要一個整體的概念來反轉這種關系。在外面包一層父元素，兩行文字和按鈕是一個整體，父元素的margin-top作為外部塊的間距，然后第一行文字和按鈕之間的間距用文字的margin-bottom來負責。這樣即使第一行文字消失了，也不會影響按鈕的展示。

下面的文字還是按照margin-top來完成即可，這樣下面的文字消失了也會影響按鈕的布局，下面文字和下面塊的間距交給下面塊去處理吧。

所以總結起來就是：

1. 布局的間距是誰負責的要有規律

2. 需要準確將頁面上的元素分塊

總結

以上是生活随笔為你收集整理的关于页面布局间距使用的经验之谈的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。