Html中代码换行造成空格间距的问题解析

解决方法:

一、简单粗爆不换行

写代码的时候不要换行,input等在一行输写,那么将解决该问题。但是代码就变得不再那么容易好看。

二、设置父级块的字体大小为0

这样也能解决问题,代码也好看,但是当你设置了父级的字体大小为0时,你里面又要其它字体要显示,可能就得加span等标签去包裹它,并且重新设置字体大小。
三:设置margin-left为-3象素

使得该元素基于原来的位置向左偏移三个象素,也就看不出有空隙了。

对于html内置的内联级标签以及表单元素标签,源代码中连续几个内联级标签中的换行在浏览器中会被解释为一个空格。

包括ie和ff。而这个空格是会被当作一个空白节点(nodeType等于3的节点,就是文字节点)。

对于html内置的块级标签使用了display:inline;则没上述问题。

对于html内置的块级标签之间的换行,ff会当作一个空白节点(用js可以获取到),ie则会忽略掉这个换行。

这个换行在ie和ff的页面上并无任何影响,不会出现空格。

Html中代码换行造成空格间距的问题的更多相关文章

  1. html代码换行造成空格间距问题

    连续几个内联标签或表单元素标签的换行在浏览器会被解释为一个空格. 比如下面代码: <span style="border:1px solid #f20">hello&l ...

  2. 由一个项目需求引发的 - textarea中的换行和空格

    当我们使用 textarea 在前台编辑文字,并用 js 提交到后台的时候,空格和换行是我们最需要考虑的问题.在textarea 里面,空格和换行会被保存为/s和/n,如果我们前台输入和前台显示的文字 ...

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

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

  4. Azure DevOps Server (TFS)中代码文件换行问题解决方案(Git)

    之前写过一篇博客"探索TFS Git 库文件换行(CRLF)的处理方式",主要是针对TFVC代码库的. 下面这篇文章说明如何在TFS的Git库中处理代码换行的问题. 概述 在Azu ...

  5. angularjs中类似textarea的换行、空格处理

    背景 今天测试人员测试出来一个显示数据的页面,没有换行. 原因剖析 这个页面是从一个<textarea>的页面拿到的数据,存到数据库中后再返回来的. 1. 知道这点之后,就有了调查方向了: ...

  6. PHP中去除字符串中的换行的方法

    在PHP中,有时候我们需要对字符串的换行进行过滤,比如天涯PHP博客中文章页面的description信息,我是直接截取的文章内容,并过滤掉html符号,最终还要过滤掉其中的换行.下面整理一下常见的去 ...

  7. CSS中控制换行的四种属性

    一.white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果,点此查看示例. Example Source Code 语法: white-space : normal  ...

  8. ASP.NET过滤HTML标签只保留换行与空格的方法

    这篇文章主要介绍了ASP.NET过滤HTML标签只保留换行与空格的方法,包含网上常见的方法以及对此方法的改进,具有一定的参考借鉴价值,需要的朋友可以参考下   本文实例讲述了ASP.NET过滤HTML ...

  9. html中一些莫名的空格

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

随机推荐

  1. web网站 Vs 移动App 谁更能打动你?之 产品经理篇

    从web1.0到web2.0,由单调变为丰富——无论是内容,呈现,还是用户交互,当我们(接触互联网只有五六年的人)可能还沉浸在这绚丽多彩,啧啧称奇web交互体验之中,移动App不知道在什么时候已经悄然 ...

  2. nano编辑器使用教程

    使用Linux VPS会经常和编辑器打交道,一般常用的是vi和nano,虽然vi功能强大,但是相对新手来要稍微难上手,GNU nano是一个体积小巧而功能强大的文本编辑器.这里就简单说一下nano的使 ...

  3. css3选择器详解

    css中除了早先最早的,ID选择器,class选择器一些以外在css3中新加入了新的选择器,新选择器的使用大大的方便了我们的编程,下面我就说一些css3的选择器的使用方法, p       选择了所有 ...

  4. 书旗小说app点评

    书旗小说这个手机软件用了好久了,大一的时候就开始用,业余无聊时间可以看一看网络小说打发一下时间. 书旗免费小说是一款内容以免费小说书旗网为基础的在线阅读器,除了拥有传统阅读器的书籍同步阅读.全自动书签 ...

  5. 洛谷 1004 dp或最大费用流

    思路: dp方法: 设dp[i][j][k][l]为两条没有交叉的路径分别走到(i,j)和(k,l)处最大价值. 则转移方程为 dp[i][j][k][l]=max(dp[i-1][j][k-1][l ...

  6. cc1101 ASK发射模式

    cc1101 配置  433.919830Mhz  1.19948kBaud   199.951172  58.035714 #ifndef _CC1100_H_#define _CC1100_H_ ...

  7. js判断是否是移动端 访问移动端网址

    1以下为代码,可放置在网站foot底部文件,或者haead顶部文件,建议将代码放在网站顶部,这样可以实现手机访问立即跳转! <script src="http://siteapp.ba ...

  8. AngularJS - Passing data between pages

    You need to create a service to be able to share data between controllers. app.factory('myService', ...

  9. google closure--继承模块一:goog.inherits()

    最近在项目是使用了google closure框架,深入研究了一下源码,先从最简单的继承系统吧. 废话不多说,closure继承模块主要有2个API: goog.inherits(childCtor, ...

  10. hibernate3 所需的jar包