html中通过移除空格的方法来解决浏览器上的留白间距该怎么理解?
今天在切图的时候,碰到一个兼容性的问题,很幸运最后通过张金鑫老师的文章解决了这个问题!但在阅读张老师文章的时候,我有个地方不明白,在网上查了下也没找到我想要的答案,后来自己想了半天好像是这么回事,现在我把我的想法写出来,如果有不对的地方,大家一定要指出哦。
如图(事例1):

这是张老师文章中的一段事例代码,代码的结构是一个div包括着3个a元素,每个a元素之间都是各占一行,所以显示在浏览器上时,a元素之间会有一个间隙,如图:

那么问题来了!将代码改成这样,如图(事例2):

最后的结果是这样的,如图:

a元素之间的间距居然消失了!为什么在代码上的一些轻微的改变就会产生不一样的结果呢?这让处女座的我陷入了深深的思考……@-@!

我是这么理解的:事例1中的代码,a元素与a元素之间的间距是属于元素与元素之间的距离,最终在浏览器中显示空白,借用张老师中文章的一段话“元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。”将视角转到事例2,在图片中,如下:

代码与代码存在空白的部分,但这空白的部分是属于元素与内容之间的距离(a元素与它的内容)不是张老师在文章中提到的元素与元素间的留白间距,所以在浏览器中显示出来就不会产生留白间距。so?在代码中的一些轻微的改变就有可能帮助你解决大问题哦!如上例中将元素与元素的间距变成元素与内容之间的间距,就帮我解决了兼容性的问题!
以上就是我在今天所收获的知识,当然我的理解可能会有错误,但如果你有不同的想法一定要说出来哦!评论~
html中通过移除空格的方法来解决浏览器上的留白间距该怎么理解?的更多相关文章
- Python中常见字符串去除空格的方法总结
Python中常见字符串去除空格的方法总结 1:strip()方法,去除字符串开头或者结尾的空格>>> a = " a b c ">>> a.s ...
- oracle中去掉回车换行空格的方法详解
函数: 1.translate语法:TRANSLATE(char, from, to)用法:返回将出现在from中的每个字符替换为to中的相应字符以后的字符串. 若from比to ...
- Shell中去除字符串前后空格的方法
[root@local ~]# echo " A BC " A BC [root@local ~]# eval echo " A BC " A BC 或者 [r ...
- JS中json数组多字段排序方法(解决兼容性问题)(转)
前端对一个json数组进行排序,用户需要动态的根据自己的选择来对json数据进行排序. 由于后台表设计问题所以不能用sql进行排序,这里用到了js的sort方法. 如果对单字段排序,那么很简单,一个s ...
- PHP中调用SVN命令更新网站方法(解决文件名包含中文更新失败的问题)
想说写一个通过网页就可以执行 SVN 升级的程序,结果并不是我想得那样简单,有一些眉角需要注意的说. 先以 Apache 的用户帐号执行 SVN checkout,这样 Apache 才有 SVN 的 ...
- Ubuntu中查看硬盘分区UUID的方法(所有Linux目录的解释)
在Ubuntu中UUID的两种获取方法,至于UUID是什么,你可以大概理解为分区的标识符,像条形码那样. 在终端中输入下面的命令就可心查看到分区UUID了.命令1.sudo blkid 命令2.ls ...
- oracle中如何对字符串进行去除空格的方法
oracle中如何对字符串进行去除空格的方法 今天学习了一下oracle中如何对字符串进行去除空格的方法,这里总结一下.了解到的方法主要有两种:Trim函数以及Replace函数.下面我详细的介绍一下 ...
- 空格&nbsp在不同浏览器中显示距离不一致问题解决方法
在ie.firefox.chrome浏览器上显示的效果不太一样,主要是前面的空格宽度不同. 网上资料说不同的浏览器会有不同的默认字体.一般 IE默认字体都是宋体,而firefox和chrome的默 ...
- Java中去除字符串中空格的方法
昨天写了一个关于Excel文件处理的脚本,在字符串匹配功能上总是出现多余不正确的匹配,debug调试之后,发现一个坑. ------->代码中字符串使用了replaceAll()方法,去除了所有 ...
随机推荐
- ubuntu 18.04 通过联网方式安装wine
ubuntu 18.04 通过联网方式安装wine 1.如果是64位机器,先开启允许32位架构程序运行 sudo dpkg --add-architecture i386 2.添加元wine源码安装仓 ...
- Qt 学习之路 2(58):编辑数据库外键
Qt 学习之路 2(58):编辑数据库外键(skip) 豆子 2013年7月12日 Qt 学习之路 2 13条评论 前面几章我们介绍了如何对数据库进行操作以及如何使用图形界面展示数据库数据.本章我们将 ...
- 【Java】qatools.properties
Link: https://github.com/qatools/properties 今天在GitHub上看到一个Java库,能方便帮助读取properties的配置文件. 具体使用可以参考上面的链 ...
- paraview显示指定时间段的时均图(两种方法)
方法一: 首先计算以后会得到每个时刻的网格数据,如下图: 但是我们只想要比如最后2s的数据,如果直接导入,paraview会把从0s时刻的数据全部加载,做时均图的时候也就是对整个时间段做时均,不是我们 ...
- LeetCode162.寻找峰值
162.寻找峰值 描述 峰值元素是指其值大于左右相邻值的元素. 给定一个输入数组 nums,其中 nums[i] ≠ nums[i+1],找到峰值元素并返回其索引. 数组可能包含多个峰值,在这种情况下 ...
- 洛谷 P3239 [HNOI2015]亚瑟王(期望dp)
题面 luogu 题解 一道复杂的期望\(dp\) 思路来源:__stdcall 容易想到,只要把每张牌打出的概率算出来就可以求出\(ans\) 设\(fp[i]\)表示把第\(i\)张牌打出来的概率 ...
- 获取HTML代码用 像阿里巴巴
public string GetHtml(string url) { string html = String .Empty; ...
- 108th LeetCode Weekly Contest Binary Subarrays With Sum
In an array A of 0s and 1s, how many non-empty subarrays have sum S? Example 1: Input: A = [1,0,1,0, ...
- 在Eclipse中添加Servlet-api.jar的方法
方法一: 正确的加载servlet-api.jar的方法如下: 1:右击项目工程名称 2:Properties 3: Jvav Build Path 4: Libraries 5: Add Ex ...
- 【研究】Metasploit自动攻击模块
环境:kali-linux-2017.3-vm-amd64 一.安装postgresql数据库 apt-get install postgresql apt-get install rubygems ...