inline與block的差異與用法

1. display:inline

  • 可解除float時,在IE6底下與float同邊的margin會變兩倍大的bug
  • 用li排橫排圖片連結的時候,設成inline就不需要使用float,可直接變成一排,此方法是只適用於圖片連結,且這時候li之間不能換行,否則會出現下列與圖片相同的有空格的問題。

2. display:blok

  • 當圖片放置出現莫名的空格的時候,原因來自於標籤換行後,在inline的狀態下瀏覽器會認為有空格,因此處理方法為把圖片設定成block即可解決
  • 上述問題通常也會出現在edm切版跟電子報切版。通常狀況是這樣:切版的時候<img>與後面的標籤是連在一起沒有換行、中間也沒任何空白的,這個時候顯示會正常。但是一旦<img>後面的標籤沒有直接接著、有換行,或是中間被加入空白(例如電子報寄出去的時候,有可能會自動換行或加入空白),這時候圖跟圖之間就會出現空格。實際排版時其實也很常遇到,只是通常圖片跟文字之間本來就會想要有距離,這時候這個問題就比較會被忽略。