ul标签中的li有间隔

ul标签中的li有间隔

在做李立超老师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对齐*/

图片属于替换元素，特点和字是一样的。图片的对齐方式默认也是靠着基线对齐的，但是基线不在最低边，这会导致图片和下面元素会有一个缝隙。

posted @ 2020-07-28 09:37  敏達  阅读(590)  评论(0)    收藏  举报