我们在编写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. OOP 4.21晚 指针知识点

    1.读法:int* ptr ptr是一个指针指向整型变量 2.指针类型:指针声明语句里的指针名字去掉,剩下的部分就是这个指针的类型; 3.指针所指向的类型:只须把指针声明语句中的指针名字和名字左边的指 ...

  2. 大爽Python入门教程 2-5 *拓展实践,对比与思考

    大爽Python入门公开课教案 点击查看教程总目录 本文偏难. 推荐等第一二三四章上完后,回过来拓展阅读. 基础情景思考 假设有这样一张成绩表 最左边的一列是名字,起名麻烦. 这里直接用ABC...来 ...

  3. Django 小实例S1 简易学生选课管理系统 10 老师课程业务实现

    Django 小实例S1 简易学生选课管理系统 第10节--老师课程业务实现 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 课程模块中,老师将要使 ...

  4. CAP 5.2 版本发布通告

    前言 今天,我们很高兴宣布 CAP 发布 5.2 版本正式版,在这个版本中,我们主要致力于更好的优化使用体验以及支持新的 Transport,同时在该版本也进行了一些 bug 修复的工作. 自从 5. ...

  5. 菜鸡的Java笔记 开发支持类库

    开发支持类库 SupportClassLibrary        观察者设计模式的支持类库                    content (内容)        什么是观察者设计模式呢?   ...

  6. 使用PAM模块实现普通用户之间su免密切换

    参考自:Allow user1 to "su - user2" without password https://unix.stackexchange.com/questions/ ...

  7. Go语言核心36讲(Go语言实战与应用八)--学习笔记

    30 | 原子操作(下) 我们接着上一篇文章的内容继续聊,上一篇我们提到了,sync/atomic包中的函数可以做的原子操作有:加法(add).比较并交换(compare and swap,简称 CA ...

  8. [loj3463]表达式求值

    类似cf582E,先建出表达式树,然后树形dp+离散+min和max卷积的优化,复杂度为$o(nm|E|)$,无法通过 考虑我们仅关心于这$n$个数的大小关系,具体来说,假设给出的数组是$a_{i,j ...

  9. [spring-core]作用域

    本文试图从原理上讲解Spring IoC容器的作用域机制,建议对着源码阅读,事半功倍. 0 引入问题 当我们谈到Spring作用域的时候,自然而然会想到如下作用域(来自spring-core官方文档) ...

  10. Python之阶乘代码

    #coding=utf-8 while True:     num = int(input("请输入要阶乘的正整数数字,按负数退出:"))     jiec=1     if nu ...