CSS 行内、行内块元素空白间隙解决方案-蒲公英云

CSS 行内、行内块元素空白间隙解决方案

桃扇骨 2022-12-29 09:19 179阅读 0赞

1. 行内块元素 img 图片空白

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> img { width: 200px; } </style>
</head>
<body>
    <img src="./img/杨幂.jfif" alt="">
    <img src="./img/杨幂.jfif" alt="">
    <img src="./img/杨幂.jfif" alt="">
</body>
</html>

显示：

在这里插入图片描述
处理办法：

两张图片中间的空白，可以用div把两张图片放在一起，设置style为font-size=0.

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> img { width: 200px; } div { font-size: 0; } </style>
</head>
<body>
    <div>
        <img src="./img/杨幂.jfif" alt="">
        <img src="./img/杨幂.jfif" alt="">
        <img src="./img/杨幂.jfif" alt="">
    </div>
</body>
</html>

显示：
在这里插入图片描述

2. 行内元素 span i 等出现空白的问题解决。

代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="keywords" content="zidingyi">
        <meta name="description" content="zidingyi">
        <meta charset="UTF-8">
        <title>google demo</title>
        <style> span { font-size: 100px; background-color: pink; } .blue { color: #4E89E5; } .red { color: #DB2138; } .yellow { color: #DDCD44; } .green { color: #46B75F; } </style>
    </head>
    <body>
            <span class="blue">G</span>
            <span class="red">o</span>
            <span class="yellow">o</span>
            <span class="blue">g</span>
            <span class="green">l</span>
            <span class="red">e</span>
    </body>
</html>

显示：
在这里插入图片描述
解决办法：

给body加style样式，font-size: 0px;

代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="keywords" content="zidingyi">
        <meta name="description" content="zidingyi">
        <meta charset="UTF-8">
        <title>google demo</title>
        <style> body { font-size: 0px; } span { font-size: 100px; background-color: pink; } .blue { color: #4E89E5; } .red { color: #DB2138; } .yellow { color: #DDCD44; } .green { color: #46B75F; } </style>
    </head>
    <body>
            <span class="blue">G</span>
            <span class="red">o</span>
            <span class="yellow">o</span>
            <span class="blue">g</span>
            <span class="green">l</span>
            <span class="red">e</span>
    </body>
</html>