CSS font-size: 0去除内联元素空白间隙
我们在编写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去除内联元素空白间隙的更多相关文章
- 如何去除内联元素(inline-block元素)之间的间距(转载)
如何去除内联元素(inline-block元素)之间的间距 前几天写一个专题页 div{width:900px;}div a{ display:inline-block; width:300px; ...
- 【CSS】display: inline-block,内联元素
什么是内联元素? <CSS权威指南>中文字显示:任何不是块级元素的可见元素都是内联元素.其表现的特性是“行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示.比如,我们设定 ...
- 如何去除内联元素(inline-block元素)之间的间距
<body><a href="http://www.baidu.com">百度</a><a href="http://www.i ...
- css 块元素、内联元素、内联块元素
块元素.内联元素.内联块元素: 元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 块元素: 块元素,也可以称为行元素,布局中常用的标签 ...
- 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位
块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...
- 18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素、内联元素、内联块元素
盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 ...
- html中内联元素和块元素的区别、用法以及联系
昨天用asp.net的BulletedList做一个导航栏,最终该控件形成的html代码是ul列表和a超链接,具体代码如下: <ul id="BulletedList1" s ...
- (转) html块级元素和内联元素区别详解
http://blog.csdn.net/chen_zw/article/details/8713205 块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显 ...
- html块级元素和内联元素区别详解
块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...
随机推荐
- PTA7-1 迷宫寻路 (20分)
7-1 迷宫寻路 (20分) 给定一个M行N列的迷宫图,其中 "0"表示可通路,"1"表示障碍物,无法通行.在迷宫中只允许在水平或上下四个方向的通路上行走,走过 ...
- JavaScript数组方法大集合
JavaScript数组方法集合 本文总结一下js数组处理用到的所有的方法.自己做个笔记. 数组方法 concat() 合并两个或多个数组 concat()能合并两个或者多个数组,不会更改当前数组,而 ...
- Power Platform Center of Excellence (CoE) 部署完成&主要内容说明
随着目前国内使用Power Platform的企业越来越多,而在跟客户交付项目时,客户经常想了解平台的一些基本情况: Power Platform 有多少环境,分别是谁创建和管理? Power Pla ...
- 史上最全的Excel导入导出之easyexcel
喝水不忘挖井人,感谢阿里巴巴项目组提供了easyexcel工具类,github地址:https://github.com/alibaba/easyexcel 文章目录 环境搭建 读取excel文件 小 ...
- Python 匿名函数用法和return语句
匿名函数用法1.什么是匿名函数 函数定义过程中,没有给定名称函数,python中用lambda表达式创建匿名函数 lambda只是一个表达式,函数体比def简单 lambda主题是一 ...
- 从零搭建vsftpd
先吐槽一下这个工具,配置繁琐,限制规则复杂,报错信息不够详细,学起来吃力. 准备工作 [root@vsftp-server ~]# mkdir /data/ #创建ftp目录 [root@vsftp- ...
- [noi706]Sabotage
先可以将所有出度为0的节点连向一个点,然后问题变为求到这个点的必经之点这其实是一道模板题,因为有一个东西叫做支配树容易发现一个点的必经之点都是一条链,其实可以把这条链上最浅的点作为这个点的父亲,那么一 ...
- [bzoj1572]工作安排
按照Di排序,从小到大枚举物品,考虑如果直接能选就选上,不能选就考虑替换之前价值最小的来选(显然一定是可行的,只需要在原来选价值最小的时候选这个就行了),这个东西用堆来维护即可 1 #include& ...
- Git操作: git commit代码后,如何撤回且保留commit的代码
git commit代码后,但是没有push之前,如果发现提交的代码有一个部分是有问题的,或者commit message写的太随便了想改一下,以下命令会帮到你 git reset HEAD^ 敲击该 ...
- settings.json文件语法错误先清理错误再重试
运行官方demo,提示要微信开发者工具,导入路径出这玩意. 点击工具,设置,源码试图,把左边代码全部复制到右边, "weApp.devTools.path":"W:\\微 ...