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)都可控制; ...
随机推荐
- 问题 D: 某种序列
题目描述 数列A满足An = An-1 + An-2 + An-3, n >= 3 编写程序,给定A0, A1 和 A2, 计算A99 输入 输入包含多行数据 每行数据包含3个整数A0, A ...
- 网页视频不能自动播放?HTML5 video报错Uncaught (in promise) DOMException解决方法
话说发哥四年前写了一个网页,如上图效果,实际网址http://pano.z01.com ,话说做好时是正常的,突然某一天,客户说你这个网站动画不见了,这是什么原因? 结果检查脚本一切正常. 其实也不是 ...
- [Vue]浅谈Vue3组合式API带来的好处以及选项API的坏处
前言 如果是经验不够多的同志在学习Vue的时候,在最开始会接触到Vue传统的方式(选项式API),后边会接触到Vue3的新方式 -- 组合式API.相信会有不少同志会陷入迷茫,因为我第一次听到新的名词 ...
- halcon语法讲解
前言 最近换工作,在学习了解halcon工具,每天总结分析今天所学知识,今天是基础语法篇! 1.基本语法 描述 语法 等号 := 不等号 # 注释符 * 字符串赋值 str:='halcon' 等于比 ...
- Python编程环境设置
第1节.Python编程环境设置 一.sublime相关 1.sublime REPL插件安装 (1)安装 先打开插件安装面板:ctrl+shift+P 输入install ,选择Package Co ...
- 看动画学算法之:hashtable
目录 简介 散列表的关键概念 数组和散列表 数组的问题 hash的问题 线性探测 二次探测 双倍散列 分离链接 rehash 简介 java中和hash相关并且常用的有两个类hashTable和has ...
- 用图像识别玩Chrome断网小游戏
先来看一下效果 正文 最近在学习机器学习方面的知识,想着做个东西玩玩,然后就接触到了TensorFlow这个机器学习框架,这个框架封装了机器学习的一些常用算法. 不过要自己实现一套流程还是比较麻烦,我 ...
- BFS实现迷宫问题
BFS实现迷宫问题 问题描述,要求从起点走到终点,找出最短的距离,要避开障碍 输入描述,输入一个二维数组表示地图,其中等于10就是终点,等于-10就是起点,等于1就是障碍,等于0就是可以走的 代码: ...
- 2021.9.30 Codeforces 中档题四道
Codeforces 1528D It's a bird! No, it's a plane! No, it's AaParsa!(*2500) 考虑以每个点为源点跑一遍最短路,每次取出当前距离最小的 ...
- IOI 2020 国家集训队作业
\(\checkmark\) 试题一 完成情况 试题二 完成情况 试题三 完成情况 cf549E cf674G arc103_f \(\checkmark\) cf594E agc034_f agc0 ...