在页面布局的时候遇到一个问题在此记录。

有如下布局需求。页面上大多数都是这样的，一块一块从上到下排列。

块与块之间的间距需要固定由谁来负责。例如第一个块和第二个块之间的间距，就需要第二个块的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. 需要准确将页面上的元素分块