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)都可控制; ...
随机推荐
- Python知识整理(三)
三.函数式编程与模块 1.函数式编程 1.高阶函数 把函数作为参数传入,这样的函数称为高阶函数,函数式编程就是指这种高度抽象的编程范式. 1.map/reduce map()函数接收两个参数,一个是函 ...
- 在安卓开发中需要格式化桌面icon图标
使用以下在线工具即可实现http://www.makeicon.cc/home/index
- 超图GIS入门iserver搭建,前端调用iserver加载三维场景demo
目录 前言 一.GIS介绍,为什么选择它? 二.环境安装 三.调用三维GIS场景 设置地图风格 添加地图iServer服务 前言 前段时间因为对3D制图感兴趣,学习了一下国内制作GIS的公司产品技术, ...
- 洛谷 P5527 - [Ynoi2012] NOIP2016 人生巅峰(抽屉原理+bitset 优化背包)
洛谷题面传送门 一道挺有意思的题,想到了某一步就很简单,想不到就很毒瘤( 首先看到这样的设问我们显然可以想到背包,具体来说题目等价于对于每个满足 \(i\in[l,r]\) 的 \(a_i\) 赋上一 ...
- 莫比乌斯反演&各种筛法
不学莫反,不学狄卷,就不能叫学过数论 事实上大概也不是没学过吧,其实上赛季头一个月我就在学这东西,然鹅当时感觉没学透,连杜教筛复杂度都不会证明,所以现在只好重新来学一遍了(/wq 真·实现了水平的负增 ...
- Codeforces 446C - DZY Loves Fibonacci Numbers(斐波那契数列+线段树)
Codeforces 题目传送门 & 洛谷题目传送门 你可能会疑惑我为什么要写 *2400 的题的题解 首先一个很明显的想法是,看到斐波那契数列和 \(10^9+9\) 就想到通项公式,\(F ...
- 【Python小试】统计一条核酸序列中频数非0或为2的双核苷酸
概念 双核苷酸由任意2个碱基组成 测试1 dna = "AATGATGAACGAC" #一一列举 dinucleotides = ['AA','AT','AG','AC', 'TA ...
- Python——MacBook Pro中安装pip
1.系统已有python2和python3,如何检查MacBook Pro系统是否安装的有pip? 看到terminal的提示没有,有提示pip的,下面的提示,说明pip安装了. 要查看pip3是否安 ...
- SSH客户端工具连接Linux(有的也可以连接Windows、mac、iOS等多系统平台)
要远程操作Linux的话还是得靠SSH工具,一般来说,Linux是打开了默认22端口的SSH的服务端,如果我们要远程它的话,就需要一个SSH客户. 我对一款好用的工具主要需要满足以下几点. (1)连接 ...
- Spark3学习入门【基于Java】
Spark 是离线数据处理的一种大数据技术,和Flick相比数据处理要延后,因为Flick是实时数据处理,而Spark需要先读取数据到内存. Spark的库是基于Scala写的,虽然Scala也是运行 ...