我们在编写HTML标签的时候,通常会使用换行,缩进来保证代码的可读性。同时,在编写CSS样式的时候,也会需要把一些元素设置为inlineinline-block。这样一来,有时在页面中会出现意外的空白间隙导致页面视图与本意不符。

  先来了解一下出现空白间隙的原因吧!因为内联元素默认排版中有空白间隙,以此来把每一个内联元素独立分开,这里的空白间隙也就是空白的文本节点,在缩进代码时会占据宽度,所以就导致了意外的空白间隙。

那么接下来为大家提供三种解决方法

  1.去掉两个HTML标签中的空白,也就是去掉换行,使两个标签紧紧挨在一起,去除了标签中的空白文本节点,也就去除了空白间隙。

    这种方法通常可以解决问题,但同时会使代码可读性下降,降低代码整洁度,偶尔使用影响不会太大。

  2.为元素设置letter-spacing属性letter-spacing属性允许使用负值,这会让字母之间挤得更紧。

    这种方法也可以算是一种解决方式,不过更多的还是用来设置字符的间距。

  3.为内联元素的父元素添加font-size属性,并设置为0,找到需要清除空白的内联元素,将内联元素的父元素的font-size属性设置为0就可以了,不过别忘了在内联元素中重新设置对应的font-size值。

    这个方法是最推荐的,也是最常用的方法,可以很好处理空白间隙问题。

CSS font-size: 0去除内联元素空白间隙的更多相关文章

  1. 如何去除内联元素(inline-block元素)之间的间距(转载)

    如何去除内联元素(inline-block元素)之间的间距   前几天写一个专题页 div{width:900px;}div a{ display:inline-block; width:300px; ...

  2. 【CSS】display: inline-block,内联元素

    什么是内联元素? <CSS权威指南>中文字显示:任何不是块级元素的可见元素都是内联元素.其表现的特性是“行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示.比如,我们设定 ...

  3. 如何去除内联元素(inline-block元素)之间的间距

    <body><a href="http://www.baidu.com">百度</a><a href="http://www.i ...

  4. css 块元素、内联元素、内联块元素

    块元素.内联元素.内联块元素: 元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 块元素: 块元素,也可以称为行元素,布局中常用的标签 ...

  5. 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位

    块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...

  6. 18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素、内联元素、内联块元素

    盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 ...

  7. html中内联元素和块元素的区别、用法以及联系

    昨天用asp.net的BulletedList做一个导航栏,最终该控件形成的html代码是ul列表和a超链接,具体代码如下: <ul id="BulletedList1" s ...

  8. (转) html块级元素和内联元素区别详解

    http://blog.csdn.net/chen_zw/article/details/8713205 块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显 ...

  9. html块级元素和内联元素区别详解

    块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...

随机推荐

  1. 写给初学者的Linux errno 错误码机制

    不同于Java的异常处理机制, 当你使用C更多的接触到是基于错误码的异常机制, 简单来说就是当调用的函数发生异常时, 程序不会跳转到一个统一处理异常的地方, 取而代之的是返回一个整型错误码. 可能会有 ...

  2. tomcat9启动报错too low setting for -Xss

    在tomcat下部署war包启动时报错,关键错误信息如下: Caused by: java.lang.IllegalStateException: Unable to complete the sca ...

  3. Intellij Idea显示回退和前进按钮的方法

    方法1:使用快捷键: 回到上一步  ctrl + alt + <-(左方向键) 回到下一步 ctrl + alt + ->(右方向键) 方法2:在界面显示: View -> 勾选To ...

  4. Java学习(十一)

    今天学习了this和static关键字,这两个都是c++中学过的,但讲师还是讲了2个小时... 学得东西大部分都知道吧. this是当前对象的地址,类中带有static的方法不能使用this. 类中带 ...

  5. Python知识整理(三)

    三.函数式编程与模块 1.函数式编程 1.高阶函数 把函数作为参数传入,这样的函数称为高阶函数,函数式编程就是指这种高度抽象的编程范式. 1.map/reduce map()函数接收两个参数,一个是函 ...

  6. 华为开发者大会主题演讲:3D建模服务让内容高效生产

    内容来源:华为开发者大会2021 HMS Core 6 Graphics技术论坛,主题演讲<3D建模服务使能3D内容高效生产>. 演讲嘉宾:华为消费者云服务 AI算法专家 3D建模服务(3 ...

  7. 常用的Dos(Win+R)命令

    打开CMD的方式 开始 + 系统 + 命令提示符 win + R --> 输入CMD 管理员方式运行:开始-->windows系统-->右击命令提示符-->管理员身份运行(最高 ...

  8. 3、使用ListOperations操作redis(List列表)

    文章来源:https://www.cnblogs.com/shiguotao-com/p/10560354.html 方法 c参数 s说明   List<V> range(K key, l ...

  9. 阿里云服务器的MySQL连接和vscode远程连接

    目录 一.前言 二.使用Navicat等软件连接MySQL 1. 修改服务器系统密码 2. 防火墙选项添加MySQL 3. 使用Navicat连接 三.使用vscode连接服务器 一.前言 双十一的时 ...

  10. sar 系统活动情况报告

    sar(System Activity Reporter系统活动情况报告)是目前 Linux 上最为全面的系统性能分析工具之一,可以从多方面对系统的活动进行报告, 包括:文件的读写情况.系统调用的使用 ...