我们在编写HTML标签的时候，通常会使用换行，缩进来保证代码的可读性。同时，在编写CSS样式的时候，也会需要把一些元素设置为inline或inline-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. es聚合查询语法

    {    "size": 0,    "query": {        "bool": {            "filter ...

  2. 【ASP.NET Core】体验一下 Mini Web API

    在上一篇水文中,老周给大伙伴们简单演示了通过 Socket 编程的方式控制 MPD (在树莓派上).按照计划,老周还想给大伙伴们演示一下使用 Web API 来封装对 MPD 控制.思路很 Easy, ...

  3. Python 中的反转字符串：reversed()、切片等

    摘要:以相反的顺序反转和处理字符串可能是编程中的一项常见任务.Python 提供了一组工具和技术,可以帮助您快速有效地执行字符串反转. 本文分享自华为云社区<Python 中的反转字符串:rev ...

  4. CTF入门学习2->Web基础了解

    Web安全基础 00 Web介绍 00-00 Web本意是网,这里多指万维网(World Wide Web),是由许多互相连接的超文本系统组成的,通过互联网访问. Web是非常广泛的互联网应用,每天都 ...

  5. [luogu5577]算力训练

    (以下以$B$为进制,$m$为幂次,$n=B^{m}$) 定义$\oplus$为$k$进制下不进位加法,$\otimes$为$\oplus$卷积 令$f_{i,j}$表示前$i$个数的$\oplus$ ...

  6. AOP声明式事务

    1.spring-dao.xml修改 参考上面工程配置 <?xml version="1.0" encoding="UTF-8"?> <bea ...

  7. 【NetWork】外网和内网

    外网和内网 2019-11-16  11:22:37  by冲冲 1.内网 ① 内网的电脑们,需要经过交换机.路由器,才能访问Internet(外网). ② 因为外网IP比较紧张,现在的电脑普及使得外 ...

  8. springboot配置自动提示插件-IDEA

    社区版的IDEA编辑spring boot项目的properties或者yml文件不会自动提醒.可手动安装IDEA的插件解决. Setting >> Plugins >> 搜索 ...

  9. 带你了解Typescript的14个基础语法

    摘要:Typescript可以说是JavaScript的超集,在JS的基础上新增了许多语法特性,使得类型不再可以随意转换,能大大减少开发阶段的错误. 本文分享自华为云社区<Typescript基 ...

  10. [Cnoi2020]线性生物

    期望入门题.但是我不会做. 考虑设\(E_{x\to{x+1}}\)为\(x\)到\(x+1\)点的期望步数. 则\(ans = \sum_{i = 0}^{n} E_{x\to{x+1}}\) 知\ ...