css基础(27)_行内、行内块元素之间的空白问题

行内、行内块元素之间的空白问题

产生的原因:
行内元素、行内块元素 ,彼此之间的换行会被浏览器解析为一个空白字符。

案例一:

html 复制代码
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>行内元素之间的空白问题</title>
</head>
<style>
    div{
        height: 500px;
        font-size: 20px;
    }
    .box1{
        background-color: aquamarine;
    }
    .box2{
        background-color:blueviolet;
    }
    .box3{
        background-color:burlywood;
    }
</style>
<body>
    <div>
        <span class="box1">张三</span>
        <span class="box2">李四</span>
        <span class="box3">王五</span>
    </div>  
</body>
</html>

解决方案:
方案一:去掉换行和空格。

html 复制代码
<body>
    <div>
        <span class="box1">张三</span><span class="box2">李四</span><span class="box3">王五</span>
    </div>  
</body>

方案二 :给父元素设置font-size:0,在给需要显示文字的元素,单独设置字体大小。

html 复制代码
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>行内元素之间的空白问题</title>
</head>
<style>
    div{
        height: 500px;
        font-size: 0px;
    }
    .box1{
        font-size: 20px;
        background-color: aquamarine;
    }
    .box2{
        font-size: 20px;
        background-color:blueviolet;
    }
    .box3{
        font-size: 20px;
        background-color:burlywood;
    }
</style>
<body>
    <div>
        <span class="box1">张三</span>
        <span class="box2">李四</span>
        <span class="box3">王五</span>
    </div>  
</body>
</html>

行内块的幽灵空白问题

产生原因:

行内块元素与文本的基线 对齐,而文本的基线与文本最低端之间是有一定距离的。

案例二:

html 复制代码
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>行内元素、行内块元素之间的空白问题</title>
    <style>
        div{
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div>
        <img src="../news_picture/no_picture1.png" alt="">xxxg
    </div>
</body>
</html>

解决方案:

方案一:给行内块设置vertical,值不为baseline即可,设置为middle、bottom、top均可。

css 复制代码
        div {
            background-color: cadetblue;
        }

        img {
            vertical-align: bottom;
        }

方案二:若父元素中只有一张图片(不含其他文字、字母等),设置图片为display:block

css 复制代码
        div{
            background-color: cadetblue;
        }
        img{
            display: block;
        }
相关推荐
南玖i1 分钟前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js
excel4 分钟前
Web发展与Vue.js导读
前端
YAY_tyy6 分钟前
Three.js 开发实战教程(五):外部 3D 模型加载与优化实战
前端·javascript·3d·three.js
Zuckjet_3 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801463 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店5 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown5 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip6 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿6 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.7 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js