img下出现几像素空白的问题
生活随笔
收集整理的這篇文章主要介紹了
img下出现几像素空白的问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
先看一個例子和效果，應該就會明白我的問題了。
1 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 2 <title>Untitled Document</title> 3 <style type="text/css"> 4 *{padding:0;margin:0;} 5 ul{width:800px;margin: 20px auto;border:1px dashed #c66;overflow: hidden;} 6 ul li{list-style: none;float: left;width: 200px;} 7 ul li img{width: 200px;height: 120px;} 8 </style> 9 </head> 10 <body> 11 <ul id="demo1"> 12 <li><img src="images/1.jpg"></li> 13 <li><img src="images/2.jpg"></li> 14 <li><img src="images/3.jpg"></li> 15 <li><img src="images/4.jpg"></li> 16 </ul> 17 </body> 18 </html>運行后頁面效果如下：
圖片和下面出現了幾像素的空白。具體什么原因我現在還不知道。有朋友說是因為img不是塊狀元素，有說是IE 3px問題。先記住下解決方法：
1.將img塊狀化 ??ul li img{display:block;}
2.將img左浮動 ??ul li img{float:left;}
3.為img添加樣式?ul li img{vertical-align:top|bottom|text-top|text-bottom;}
4.為img的父級加高度 ul li{height:120px;}
5.為img的父級加樣式 ul li{font-size:0;}
img與其他元素之間不要有空格也可以解決.
熟能生巧，不知道原因，先記住，再理解。
每天進步一點點，努力超越昨天的自己。
轉載于:https://www.cnblogs.com/MissBean/p/4108778.html
總結
以上是生活随笔為你收集整理的img下出现几像素空白的问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [唐胡璐]Java操作Sql Serve
- 下一篇： 倒霉的牙蛀虫