元素之间的空白问题和行内块的幽灵空白问题

最新推荐文章于 2024-06-07 19:31:00 发布

恰饭女孩.

最新推荐文章于 2024-06-07 19:31:00 发布

阅读量157

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_45981241/article/details/130758248

版权

元素之间的空白问题和行内块的幽灵空白问题

元素之间的空白问题

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

在这里插入图片描述

解决方案：

方案一：去掉换行和空格（不推荐）

方案二：给父元素设置 font-size：0，再给需要显示文字的元素，单独设置字体大小（推荐）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03-元素之间的空白问题</title>
    <style>
        div{
           
            width: 400px;
            background-color: #aaa;
            font-size: 0;
        }
        .s1{
           
            background-color: red;
        }
        .s2{
           
            background-color: blue;
        }
        .s3{

最低0.47元/天解锁文章

恰饭女孩.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
元素之间的空白问题和行内块的幽灵空白问题

方案一：给行内内块元素设置 vertical，值不为 baseline 即可，设置为 middle、bottom、top 均可。方案三：给父级设置 font-size: 0;方案二：给父元素设置 font-size：0，再给需要显示文字的元素，单独设置字体大小（推荐）产生原因：行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。产生原因：行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。方案二：若父级元素中只有一张图片，设置图片为 display: block。
复制链接

扫一扫