使用內聯標籤時應該注意的line-height

一般情況下,當我們使用內聯元素顯示我們的圖片時,無論我們是否把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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章