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;
        }
相关推荐
F2E_Zhangmo18 分钟前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
用户214118326360234 分钟前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端
Zacks_xdc1 小时前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
给月亮点灯|1 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
张迅之2 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
蔗理苦3 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro4 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹4 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风4 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱4 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript