兼容问题:插入图片img的问题?

308 阅读1分钟

插入图片img的问题

当我们在html中通过img标签插入一张图片的时候,我们会发现图片和父盒子的地步有一个白色的空隙,我们如何解决呢?

  • 我们可以把img转换成块级元素,就可以消除缝隙
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            border: 1px solid red;
            margin: auto;
        }
        img{
            display: block;/*在img的身上加一个display:block就把图片的下面的多余的空隙就去除了*/
        }
    </style>
</head>
<body>
<div class="box">
    <img src="images/1.jpg" alt="">
</div>
</body>
</html>