使用内联标签时应该注意的line-height

最新推荐文章于 2023-04-28 08:50:00 发布

我要七龙ru

最新推荐文章于 2023-04-28 08:50:00 发布

阅读量524

点赞数 1

分类专栏： web-css 文章标签： line-heigh html img

本文链接：https://blog.csdn.net/a735311619/article/details/78166653

版权

web-css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一般情况下，当我们使用内联元素显示我们的图片时，无论我们是否把margin和padding设置为0，在两行图片之间都会存在一小片间隙。如下图
这里写图片描述
解决办法
很简单，只要把包裹他的父标签的line-height设置为0px就行了。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            width: 150px;
            height: 150px;

        }
        .all-img{
            line-height: 0px;
        }
    </style>
</head>
<body>
<div class="all-img">
<?php
$files = scandir("pic");
foreach ($files as $name){
    if ($name != '.' && $name != '..') {
        echo "<img class=\"box\" src='pic/$name'/>";
    }
}

?>
</div>
<div class="all-img">
    <?php
    $files = scandir("pic");
    foreach ($files as $name){
        if ($name != '.' && $name != '..') {
            echo "<img class=\"box\" src='pic/$name'/>";
        }
    }

    ?>
</div>
</body>
</html>

我要七龙ru

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用内联标签时应该注意的line-height

一般情况下，当我们使用内联元素显示我们的图片时，无论我们是否把margin和padding设置为0，在两行图片之间都会存在一小片间隙。如下图解决办法很简单，只要把包裹他的父标签的line-height设置为0px就行了。代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Tit
复制链接

扫一扫

专栏目录