两个span元素中间的空格间隙
2020-09-09 15:27
597 查看
初学html、css的同学是不是遇到过这样一个问题?一对好朋友(两个span元素)之间总是存在间隙。就像下图那样:
这是一对不快乐的 span,因为他们中间有了间隙
当我们给span元素添加了内容时,两个相邻的span元素的文字之间有一个间隙
问:那么这个间隙到底是什么呢?
其实它是一个空格。
问:那这个空格时怎么来的呢?
首先先来看看我们平时的代码书写习惯吧
我们是优秀的程序猿,代码要求格式要规范,所以我第二个span换行了
而就是这个没毛病的换行,让两个span差生了间隙。
让我们来看看怎么解决吧
聪明的你灵机一动,将代码写一行撒
这种方法最是简单粗暴的解决了问题,但是粗暴的方式往往会造成很多不可控的因素,后期的很多场景中也有可能让人崩溃,毕竟团队合作开发项目是多人参与,对于要求代码书写规范的人来说,这样的写法简直压死强迫症......(脑袋里面已经有画面了- -.)
来看看第二种方法吧
给父元素添加
font-size:0;在给span额外添加
font-size:;
激动的心,颤抖的手,此刻的内心:we made it !!!
但这种方法也存在问题,先是font-size被重写一次(First Blood),再者是一些老版本的浏览器下依旧会有间隙(Double Kill)或者有些浏览器对于
font-size:12px;的支持不友好(Trible Kill)。
大神的解决办法:
给span加上浮动,完美解决,哈哈哈满上...
相关文章推荐
- 找到单项链表中间那个元素,如果有两个则取前面一个
- 给定一个数组input[] ,如果数组长度n为奇数,则将数组中最大的元素放到 output[] 数组 最中间的位置,如果数组长度n为偶数,则将数组中最大的元素放到 output[] 数组中间两个位置偏右的那个位置上
- Jquery Pyquery 如何选择多class、有空格的class、两个class的元素
- 去除一个字符串的开头和结束部分的空格,中间有连续的两个或两个以上的空格,则保留一个空格
- 找到单向链表中间那个元素,如果有两个则取前面一个
- 行块级元素(并去除中间间隙)
- 解决两个标签元素过大 span 和 p标签 <ul><ol>
- C#输出两个变量中间打N个空格的方法
- 找到单项链表中间那个元素,如果有两个则取前面一个
- html 使得两个元素 左右并排垂直居中对齐的最好方法是用 span 标签把他们都包起来。
- span 元素之间的诡异间隙
- 7-10 算术入门之加减乘除 (10分) 对于输入的两个整数,按照要求输出其和差积商。 输入格式: 在一行内输入两个不超过100的非负整数a和b,中间以一个空格间隔,且保证b不为0。 输出格式:
- 两个元素为display:inline-block,之前存在的空格解决方法!
- 剑指offer 01-06解答思路以及代码(顺序数组找特定数字,替换空格字符,链表反转输出,重建二叉树,两个栈实现队列效果,旋转数组最小元素)
- 找到单向链表中间那个元素,如果有两个则取前面一个
- 找到单向链表中间那个元素,如果有两个则取前边那个
- 程序员面试题目总结--数组(三)【旋转数组的最小数字、旋转数组中查找指定数、两个排序数组所有元素中间值、数组中重复次数最多的数、数组中出现次数超过一半的数】
- 搜索栏两个input中间有间隙,如何解决?
- inline-block元素间的换行符空格间隙问题
- 如何解决两个相邻的span中间有空隙