CSS:解决img后跟随ul带来的白线和变位问题问题引出以上代码会导致这样的结果：两个元素中间出现白线第二个元素没有顶部

问题引出

<style>
    *{margin: 0; padding: 0;}
    
    img{height: 80px; width: 80px; background-color: yellow;}
    
    ul{height: 80px; width: 80px;background-color: red; list-style: none; display: inline-block;}
</style>

<body>
    <img src="https://ecmb.bdimg.com/tam-ogel/588c95515a0e1d2ebf6c0670f65e90dd_121_121.jpg" alt="">
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
</body>

以上代码会导致这样的结果：

两个元素中间出现白线
第二个元素没有顶部对齐（元凶为img是内联元素，他的对齐方式与块级元素是有区别）

解决方法

设置img为块级元素，且采用浮动

<style>
    *{margin: 0; padding: 0;}
    
    img{height: 80px; width: 80px; background-color: yellow; display:block; float:left;}
    
    ul{height: 80px; width: 80px;background-color: red; list-style: none; display: inline-block;}
</style>

<body>
    <img src="https://ecmb.bdimg.com/tam-ogel/588c95515a0e1d2ebf6c0670f65e90dd_121_121.jpg" alt="">
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
</body>

达到以下效果