我们在编写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. css 跑马灯加载特效

    css 跑马灯加载特效 <!DOCTYPE html> <html lang="en"> <head> <meta charset=

  2. [linux]centos7.4部署django+Uwsgi+Nginx

    前言:我已经写了几个接口用来部署在服务器上的,首先选择django+Uwsgi+Nginx因为配置简单,比较符合python的简单操作功能强大的特点 然后对于django的一些版本在之前的文章写了 参 ...

  3. python实现图像直方图

    目录: (一)直方图的使用 正文: (一)直方图的使用 1 from matplotlib import pyplot as plt 2 def plot_demo(image): 3 print(i ...

  4. <C#任务导引教程>练习三

    /*Convert.ToInt("213165");int a=12345;string sn=a.ToString();//把a转换成字符串snint b=int.Parse(s ...

  5. [cf1427E]Xum

    假设$x$的最高位为$2^{t}$(即$2^{t}\le x<2^{t+1}$),并构造出$y=2^{t}x\oplus x$,不难发现两者仅在第$t$位上均为1,那么根据异或的性质可得$y=( ...

  6. [bzoj1735]泥泞的牧场

    考虑木板一定都尽量长,对于每一个污泥,最多只有两种木板会覆盖它(横着和竖的),将这两块木板连边,意味着每一条边两端端点中一定有一个点要被选,即最小点覆盖=最大匹配数. 1 #include<bi ...

  7. [atARC111F]Do you like query problems

    (以下修改指1和2类操作,询问指3类操作,操作指修改或询问) 注意到总方案数确定,那么不妨求出答案的期望,再乘上方案数即为答案 (这里从期望的角度考虑只是为了描述方便,并没有太大的实际意义) 设$E( ...

  8. 推荐几款谷歌浏览器（chrome）超实用的插件

    1.github加速器 在谷歌应用商店搜索"Github加速器",安装即可. 说明:在国内访问github有时候非常慢,是让人非常头疼的一件事,安装这个插件后 大大加快github ...

  9. Codeforces 193E - Fibonacci Number（打表找规律+乱搞）

    Codeforces 题目传送门 & 洛谷题目传送门 蠢蠢的我竟然第一眼想套通项公式?然鹅显然 \(5\) 在 \(\bmod 10^{13}\) 意义下并没有二次剩余--我真是活回去了... ...

  10. 【R绘图】R 基础（base ）低级函数legend绘图？

    ggplot虽然好用,但base才是真正的瑞士军刀,什么都能用,各种自定义图形自由组合,出版级图片用base才是王道.但要达到随心所欲,需要熟练掌握. legend是比较重要的低级函数,有很多细节处理 ...