我们日常用编辑器编辑代码的时候,为了让代码的可读性更高,通常会有换行,空格或者tab键(bootstrap的规则中非常不建议这样做,不过为了方便,我还是比较习惯这样来缩进)的操作。

而这些也就造成了一些html中莫名其妙的一些空格与空行,总结一下最近遇到的一些,以后遇到其他的也会添加进来,供大家参考,有理解错误的欢迎大家不吝指正。

1.textarea中的空格及空行

textarea为html中常见的双标签,textarea中的内容可以在初始化的时候直接写在<textarea>和</textarea>之间,

接一句题外话,虽然如此,但是textarea的值如果要赋值的话不能直接用text(),要用val().

对于双标签,我习惯于写成如下这种格式:

<textarea>
</textarea>

如此,问题就来了,结果会发现,生成的textarea文本框里面莫名多出来了好多的空格

查阅资料后,将textarea标签改为以下格式,则生成的textarea正常,无空格现象

<textarea></textarea>

2.两个div之间有间隙

如下图所示,两个div中间有一条明显的空隙,既不是margin也不是padding,让人非常费解。(此问题我在去一家知名企业笔试中也遇到过,可见大企业通常都是很注重细节滴)

根据上面一个解决方案的启发,将页面结构写成如下格式:

<div class="item1">item1</div><div class="item2">item2</div>

则顺利解决空隙问题。

此问题在两个块级元素并排放的时候同样会出现。

思考:我们平时在jsp和html中都是将页面的元素按照一定的格式编排的,基本不会有专业人士将两个div并排写在一起,

  笔者刚开始猜想出现以上这种情况会不会跟代码直接写在html有关,经在jsp和js中验证得知,都会出现这种现象,

  笔者现在工作项目中应用的是bootstrap框架,项目中所有的dom元素都为浮动元素,所以并无以上问题,

  而我们平时写代码,估计也很少有人把所有的相邻元素都加上背景颜色,因此这个问题并不是很好发现,

总之,先说到这里,以后有其他相关发现笔者会继续更新,谢谢大家阅读。

html中一些莫名的空格的更多相关文章

  1. Html中代码换行造成空格间距的问题

    Html中代码换行造成空格间距的问题解析 解决方法: 一.简单粗爆不换行 写代码的时候不要换行,input等在一行输写,那么将解决该问题.但是代码就变得不再那么容易好看. 二.设置父级块的字体大小为0 ...

  2. 关于一些url中传递参数有空格问题

    1.关于一些url中传递参数有空格问题: url.replace(/ /g, "%20") 从上面的例子中可以看到可以用:replace(/ /g, "%20" ...

  3. c# 字符串中多个连续空格转为一个空格

    #region 字符串中多个连续空格转为一个空格 /// <summary> /// 字符串中多个连续空格转为一个空格 /// </summary> /// <param ...

  4. HTML中的几种空格

    HTML提供了5种空格实体(space entity),它们拥有不同的宽度,非断行空格( )是常规空格的宽度,可运行于所有主流浏览器.其他几种空格(       ‌‍)在不同浏览器中宽度各异.     ...

  5. Python中常见字符串去除空格的方法总结

    Python中常见字符串去除空格的方法总结 1:strip()方法,去除字符串开头或者结尾的空格>>> a = " a b c ">>> a.s ...

  6. 在HTML代码中要如何插入空格?

    超文本标记语言(HTML)会自动忽略空格.平常在编写代码的时候,用空格键.Tab键以及回车键产生的空格,都会被HTML自动忽略.那么我们该用什么方法来实现HTML的空格效果呢?有专门的空格代码吗?不少 ...

  7. quartusii开发过程中路径不能出现空格或中文

    quartusii开发过程中路径不能出现空格或中文,否则软件出现.stf文件错误提示,开发环境搭建的时候也不能出现空格和中文,否则也会报错.

  8. PHP 去掉文文文件中的回车与空格

    文本文件fff.txt中去除回车与空格: $aa = file_get_contents('./fff.txt'); $bb = str_replace(array("\r\n", ...

  9. 请实现一个函数,把字符串中的每一个空格替换成“%20”,比如输入 “We are Happly。” 则输出“we%20are%20happy。”

    请实现一个函数,把字符串中的每一个空格替换成"%20",比如输入 "We are Happly."  则输出"we%20are%20happy. &q ...

随机推荐

  1. 人and绩效and职业道德

    人行走在这个世界上 避免不了的是各种悲哀 人就像是一个茶几 上面放满了各种杯具 而要做的是要么把杯具打碎了咽下去,要么被杯具打晕 本布衣 躬耕于南阳 不求闻达于诸侯 每个人都可以选择自己的生活方式 或 ...

  2. 初期测评 A 排序

    https://vjudge.net/contest/240302#problem/A 输入一行数字,如果我们把这行数字中的‘5’都看成空格,那么就得到一行用空格分割的若干非负整数(可能有些整数以‘0 ...

  3. python基础(六)python操作excel

    一.python操作excel,python操作excel使用xlrd.xlwt和xlutils模块,xlrd模块是读取excel的,xlwt模块是写excel的,xlutils是用来修改excel的 ...

  4. 学习laravel源码之中间件原理

    刨析laravel源码之中间件原理 在看了laravel关于中间件的源码和参考了相关的书籍之后,写了一个比较简陋的管道和闭包实现,代码比较简单,但是却不好理解所以还是需要多写多思考才能想明白其中的意义 ...

  5. Qt Lighthouse学习(二),就是QPA(Qt Platform Abstraction) 项目的名字

    上一次关注Qt Lighthouse是在6月初,可是现在都8月底了.时间真快... Lighthouse 是 QPA(Qt Platform Abstraction) 项目的名字,它使得将Qt移植到新 ...

  6. ACM数论之旅5---数论四大定理(你怕不怕(☆゚∀゚)老实告诉我)

    (本篇无证明,想要证明的去找度娘)o(*≧▽≦)ツ ----------数论四大定理--------- 数论四大定理: 1.威尔逊定理 2.欧拉定理 3.孙子定理(中国剩余定理) 4.费马小定理 (提 ...

  7. 使用Fiddler后谷歌浏览器访问https不安全

    今天初次接触java爬虫,师兄给了一个软件加一个demo,软件是Fiddler,在网上找资料稍微学习了一下,自己一顿乱配...然后gg,谷歌浏览器访问https协议时都提示不安全,“您的链接不是一个私 ...

  8. Life Forms POJ - 3294(不小于k个字符串中的最长子串)

    题意: 求不小于字符串一半长度个字符串中的最长字串 解析: 论文题例11 将n个字符串连起来,中间用不相同的且没有出现在字符串中的字符隔开, 求后缀数组, 然后二分答案变为判定性问题, 然后判断每组的 ...

  9. Climbing Stairs - LeetCode

    目录 题目链接 注意点 解法 小结 题目链接 Climbing Stairs - LeetCode 注意点 注意边界条件 解法 解法一:这道题是一题非常经典的DP题(拥有非常明显的重叠子结构).爬到n ...

  10. 【Learning】容斥原理

    PPT在这里 https://files.cnblogs.com/files/RogerDTZ/%E5%AE%B9%E6%96%A5%E5%8E%9F%E7%90%86.pdf