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