Change History
Message: 跨瀏覽器 Box Model 實例觀察2：段落 p 在 IE8/IE9/Firefox/Chrome 中預設有上下邊距（margin-top / -bottom），但IE6、IE7沒有
Changed By: HP
Change Date: September 27, 2011 05:24AM
Change Date: September 27, 2011 05:24AM
觀察要點２：
依 W3C 官方定義，段落 <p> 的前後會有預設「一個字體大小（font-size）= 1em」的 margin，但在實例觀察中， IE6 和 IE7 沒有這個預設 margin。
若習慣於 IE6/IE7 的設計，沒有考慮到官方定義的預設段落 margin，就會出現下圖中頁尾部份的多餘空隙（紅框中的灰色部份）。在紅框中是以段落 <p> 所構成的一個空白行，因為預設的上下邊距，所以整個段落（紅框部份）有三行行高。但依 CSS Box Model 的官方定義，段落（任何元素）的背景（background）不包括邊距，所以淡藍色（#FAFAFA）的背景顏色無法出現在下邊距（margin-bottom），形成三不管地帶。最後這個三不管地帶由於沒有元素管轄，所以就繼承了 <body> 的背景顏色（#E3E3E3）。
預設段落邊距（margin）的圖示（以 Firefox6 為例）：
依 W3C 官方定義，段落 <p> 的前後會有預設「一個字體大小（font-size）= 1em」的 margin，但在實例觀察中， IE6 和 IE7 沒有這個預設 margin。
若習慣於 IE6/IE7 的設計，沒有考慮到官方定義的預設段落 margin，就會出現下圖中頁尾部份的多餘空隙（紅框中的灰色部份）。在紅框中是以段落 <p> 所構成的一個空白行，因為預設的上下邊距，所以整個段落（紅框部份）有三行行高。但依 CSS Box Model 的官方定義，段落（任何元素）的背景（background）不包括邊距，所以淡藍色（#FAFAFA）的背景顏色無法出現在下邊距（margin-bottom），形成三不管地帶。最後這個三不管地帶由於沒有元素管轄，所以就繼承了 <body> 的背景顏色（#E3E3E3）。
預設段落邊距（margin）的圖示（以 Firefox6 為例）：
<p> ... </p>
Changed By: HP
Change Date: September 27, 2011 05:21AM
Change Date: September 27, 2011 05:21AM
觀察要點２：
依 W3C 官方定義，段落 <p> 的前後會有預設「一個字體大小（font-size）= 1em」的 margin，但在實例觀察中， IE6 和 IE7 沒有這個預設 margin。
若習慣於 IE6/IE7 的設計，沒有考慮到官方定義的預設段落 margin，就會出現下圖中頁尾部份的多餘空隙（紅框中的灰色部份）。在紅框中是以段落 <p> 所構成的一個空白行，因為預設的上下邊距，所以整個段落（紅框部份）有三行行高。但依 CSS Box Model 的官方定義，段落（任何元素）的背景（background）不包括邊距，所以淡藍色（#FAFAFA）的背景顏色無法出現在下邊距（margin-bottom），形成三不管地帶。最後這個三不管地帶由於沒有元素管轄，所以就繼承了 <body> 的背景顏色（#E3E3E3）。
預設段落邊距（margin）的圖示（以 Firefox6 為例）：
依 W3C 官方定義，段落 <p> 的前後會有預設「一個字體大小（font-size）= 1em」的 margin，但在實例觀察中， IE6 和 IE7 沒有這個預設 margin。
若習慣於 IE6/IE7 的設計，沒有考慮到官方定義的預設段落 margin，就會出現下圖中頁尾部份的多餘空隙（紅框中的灰色部份）。在紅框中是以段落 <p> 所構成的一個空白行，因為預設的上下邊距，所以整個段落（紅框部份）有三行行高。但依 CSS Box Model 的官方定義，段落（任何元素）的背景（background）不包括邊距，所以淡藍色（#FAFAFA）的背景顏色無法出現在下邊距（margin-bottom），形成三不管地帶。最後這個三不管地帶由於沒有元素管轄，所以就繼承了 <body> 的背景顏色（#E3E3E3）。
預設段落邊距（margin）的圖示（以 Firefox6 為例）：
<p> ... </p>
Original Message
作者: HPDate: September 27, 2011 05:20AM
跨瀏覽器 Box Model 實例觀察2：段落
在 IE8/IE9/Firefxo/Chrome 察2：段落 p 在 IE8/IE9/Firefox/Chrome 中預設有上下邊距（margin-top / -bottom），但IE6、IE7沒有
觀察要點２：
依 W3C 官方定義，段落 <p> 的前後會有預設「一個字體大小（font-size）= 1em」的 margin，但在實例觀察中， IE6 和 IE7 沒有這個預設 margin。
若習慣於 IE6/IE7 的設計，沒有考慮到官方定義的預設段落 margin，就會出現下圖中頁尾部份的多餘空隙（紅框中的灰色部份）。在紅框中是以段落 <p> 所構成的一個空白行，因為預設的上下邊距，所以整個段落（紅框部份）有三行行高。但依 CSS Box Model 的官方定義，段落（任何元素）的背景（background）不包括邊距，所以淡藍色（#FAFAFA）的背景顏色無法出現在下邊距（margin-bottom），形成三不管地帶。最後這個三不管地帶由於沒有元素管轄，所以就繼承了 <body> 的背景顏色（#E3E3E3）。
預設段落邊距（margin）的圖示（以 Firefox6 為例）：
依 W3C 官方定義，段落 <p> 的前後會有預設「一個字體大小（font-size）= 1em」的 margin，但在實例觀察中， IE6 和 IE7 沒有這個預設 margin。
若習慣於 IE6/IE7 的設計，沒有考慮到官方定義的預設段落 margin，就會出現下圖中頁尾部份的多餘空隙（紅框中的灰色部份）。在紅框中是以段落 <p> 所構成的一個空白行，因為預設的上下邊距，所以整個段落（紅框部份）有三行行高。但依 CSS Box Model 的官方定義，段落（任何元素）的背景（background）不包括邊距，所以淡藍色（#FAFAFA）的背景顏色無法出現在下邊距（margin-bottom），形成三不管地帶。最後這個三不管地帶由於沒有元素管轄，所以就繼承了 <body> 的背景顏色（#E3E3E3）。
預設段落邊距（margin）的圖示（以 Firefox6 為例）：
<p> ... </p>