ul標籤中的li有間隔
阿新 • • 發佈：2020-07-28
ul標籤中的li有間隔
標籤： 問題 css 前端
在做李立超老師CSS教學的京東輪播圖練習時，遇到了一個問題。
圖片的大小是590470。
明明已經引入了reset.css，只是給ul設定了幾個邊距。
結果發現，每個li之間有兩個畫素的空白間距。
滑鼠放在圖片上顯示的是，img590470。
滑鼠放在li上卻顯示590*472。
多出的兩個畫素是在li的content裡的。
明天試試看給li設定樣式
<head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="./css/reset.css"> <style> /* 設定圖片的容器 */ .img-list{ width: 590px; height: 470px; margin: 100px auto; position: relative; } </style> </head> <body> <ul class="img-list"> <li><a href="javascript:;"><img src="./img/05/1.jpg"></a></li> <li><a href="javascript:;"><img src="./img/05/2.jpg"></a></li> <li><a href="javascript:;"><img src="./img/05/3.jpg"></a></li> <li><a href="javascript:;"><img src="./img/05/4.jpg"></a></li> <li><a href="javascript:;"><img src="./img/05/5.jpg"></a></li> <li><a href="javascript:;"><img src="./img/05/6.jpg"></a></li> <li><a href="javascript:;"><img src="./img/05/7.jpg"></a></li> <li><a href="javascript:;"><img src="./img/05/8.jpg"></a></li> </ul> </body>
已解決
把img的height設定為472；
.img-list li{
line-height: 0px;
}
或把li的行距設為0.
終極解決辦法：
img{
vertical-align: top;
}
/*只要不是baseline對齊*/
圖片屬於替換元素，特點和字是一樣的。圖片的對齊方式預設也是靠著基線對齊的，但是基線不在最低邊，這會導致圖片和下面元素會有一個縫隙。