display:inline和display:block區別
一、什么是雙邊距Bug？
先來看圖：
我們要讓綠色盒模型在藍色盒模型之內向左浮動，并且距藍色盒模型左側100像素。這個例子很常見，比如在網頁布局中，側邊欄靠左側內容欄浮動，并且要留出內容欄的寬度。要實現這樣的效果，我們給綠色盒模型應用以下CSS屬性：
很簡單，對吧？但是當我們在IE6中查看時，會發現左側外邊距100像素，被擴大到200個像素。如下圖：
二、怎么會這樣？
說 實話，這個原因還真是不清楚。但是這樣的結果確確實實在IE6中出現了。而且這種情況出現的條件是當浮動元素的浮動方向和浮動邊界的方向一致時才會出現。 如同上面的例子一樣，元素向左浮動并且設置了左側的外邊距出現了這樣的雙邊距bug。同理，元素向右浮動并且設置右邊距也會出現同樣的情況。同一行如果有 多個浮動元素，個浮動元素會出現這個雙邊距bug，其它的浮動元素則不會。
三、如何修正這個Bug？
很簡單，只需要給浮動元素加上display:inline;這樣的CSS屬性就可以了。就這么簡單？對，就這么簡單。如下圖：
CSS代碼如下：
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點， 并不代表本站贊同其觀點和對其真實性負責，本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺，網站上部分文章為轉載，并不用于任何商業目的，我們已經盡可能的對作者和來源進行了通告，但是能力有限或疏忽，造成漏登，請及時聯系我們，我們將根據著作權人的要求，立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。
