2013年10月9日 星期三

HTML5 圖片與選單中間空白問題


在HTML5中,圖片會對齊基線再顯示,所以圖片下方都會顯示一條空白~
範例:
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head></head>
  4. <body>
  5. <div id="img">
  6.   <img src="yourimg.jpg" alt="">
  7. </div>
  8. <!-- 一條空白-->
  9. <div id="nav">
  10.   <ul>
  11.         <li><a href="#">1</a></li>
  12.         <li><a href="#">2</a></li>
  13.         <li><a href="#">3</a></li>
  14.         <li><a href="#">4</a></li>
  15.   </ul>
  16. </div>
  17. </body>
  18. </html>
#img img{vertical-align: bottom;}   這時候只要加上這條CSS語法就可以解決這問題喔~~!!