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

来源：互联网发布：自动注音软件编辑：程序博客网时间：2024/06/06 03:53

一般情况下，当我们使用内联元素显示我们的图片时，无论我们是否把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>

阅读全文

0 0