普通塊級元素的垂直格式化
之前寫了普通流中塊級元素的水平格式化和margin一文，整理了普通流中的塊級元素在水平方向的格式化，其中重點介紹了七個和寬度有關的屬性（margin-left,border-left,padding-left,width,padding-right,border,margin-right），本文接下來介紹塊級元素的垂直格式化以及相關的屬性，和水平格式化一樣，垂直格式化同樣存在七個屬性，與高度相關，但他們的表現行為在某些方面確大大不同於水平格式化。
垂直方向的包裹性
塊級元素的預設高度是由其內容確定的，一個元素的預設高度是剛好包含其所有內容，所以我們稱元素在垂直方向具有包裹性，像指定width值一樣，也可以通過指定height值為元素顯示指定高度。
還記得我們的七個和等於父的寬原則嗎，即在水平方向，七個水平方向的屬性值得和相加等於父元素的width值，當沒有被元素指定width值時，它的width值實際上也已經被確定了，由父元素的width值減去其它六個屬性的指定值或預設值即可以得到，可以說width值預設情況下與自身內容是無關的。同樣的垂直方向上也存在七個值相加的原則，即margin-top,border-top,padding-top,height,padding-bottom,border-bottom,margin-bottom相加等於父元素（包含塊）的height值，但我們並不能說子元素的height值是由父元素的height值減去其它六個屬性值而確定的（儘管這一減法等式確實成立），這是因為這種說法恰好相反了，垂直方向上，真正的邏輯是父元素的height值等於子元素的七大屬性值相加的和，這一說法和垂直方向的包裹性也不謀而合了。
垂直方向的auto值
同水平方向一樣，垂直方向也有三個屬性可以設定為auto,分別是margin-top,margin-bottom和height.
margin-top和margin-bottom設定為auto
不同於margin-left和margin-bottom的補充寬度的作用，margin-top和margin-bottom設定為auto時，會被計算為0。也就是說在垂直方向上，不能通過設定兩個margin的值為auto而使得正常流元素在包含塊中垂直居中了。有沒有很氣憤，憑什麼垂直方向的margin要失去這個功能？仔細想想，就會覺得這種解析方式可以理解了，我們想想margin-left和margin-right為什麼可以來補充寬度呢？因為水平方向的“繼承”性，即在水平方向上，父元素的寬度永遠是最先確定的，再加上七個屬性的和相加等於父元素width這一原則，當然可以直接推斷出設定為auto的其他水平屬性的值了。那垂直方向呢？沒辦法，垂直方向是子元素的height相關值先確定，再由子元素的七個屬性值相加，才會得到父親的height值，也就是上節我們提到的包裹性。所以說當為垂直方向的屬性設定為auto時，父元素的height還不知道在哪兒呢？由如何根據父親的height來確定呢？聽起來有點繞，但是確實是這樣滴
height設定為auto
當普通流塊級元素的height值設定為auto時，會稍稍複雜一些，不同場景則由不同的表現
- 當塊級元素的子元素都是包含文字的行內元素或僅僅包含文字時，其height值恰好足以包含其行內元素所組成的行框，當文字內容涉及多行時，則任務該元素框沒有內邊距，上邊框在文字第一行上面，下邊框在文字最後一行下面，剛好包含所有文字。
- 當塊級元素的子元素是且都是塊元素且元素本身沒有padding或border時，預設高度是從最上方的子元素的上邊框到最下方的子元素的下邊框之間的距離，即子元素的最上的外邊距和最下的外邊距會“超出”父元素。
- 當塊級元素的子元素是且都是塊元素且元素有上內邊距或下內邊距，或者含有上邊框或下邊框，則元素會包含對應的最高子元素的上外邊距或最低子元素的下外邊距。
- 2、3情況均與垂直方向的合併外邊距有關。
height設定為百分數
把子元素的height設定為百分數，則子元素的高度為父元素的高度乘以這個百分數，這是我們想當然的答案，不過還有一種情況，父元素有可能並沒有顯示宣告height值啊，這個就麻煩了，因為父元素的height值預設情況下還得靠子元素的垂直屬性來確定呢，總不能互相依賴吧，只能妥協了，因此這種情況下，儘管為子元素的height設定了百分數，卻相當於沒有設定，子元素的高度還是依賴於元素本身的內容來確定。
margin-top和margin-bottom設定為百分數
可以想象，如果依賴於父元素的height值乘以百分數得到結果，那麼同height屬性面臨的問題一樣，margin-left和margin-bottom設定為百分數也存在當父元素的height未指定互相之間會陷入迴圈依賴，所以垂直方向的margin設定為百分數時，果斷放棄了對父元素height值得依賴，轉而依賴於父元素的width值，甚至無論父元素的height是否已經指定了值，都會以父元素的width值為基數來計算。
垂直外邊距的合併
垂直格式化的一大特點是垂直外邊距的合併，注意有且只有垂直方向的外邊距會發生合併，水平方向的外邊距不會發生合併，垂直方向的內邊距和邊框也不會合並。