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. ubuntu - 中文

    首先要从Ubuntu语言设置那里,把中文语言包安装上 打开/etc/environment 在下面添加如下两行 LANG="zh_CN.UTF-8″ LANGUAGE="zh_CN ...

  2. 杭电--1102--Constructing Roads--并查集

    Constructing Roads Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  3. iOS中真机连接电脑运行程序出现问题

  4. hdu, KMP algorithm, linear string search algorithm, a nice reference provided 分类: hdoj 2015-07-18 13:40 144人阅读 评论(0) 收藏

    reference: Rabin-Karp and Knuth-Morris-Pratt Algorithms By TheLlama– TopCoder Member https://www.top ...

  5. No module named * 但是已经安装了找不到解决办法

    错误现象,把\Lib\site-packages下的安装包挪动位置到新的位置后(多个Python.exe运行位置)引起这类错误 No module named * 但是已经安装了 解决过程,先试图卸载 ...

  6. Titanium studio介绍

    1.Titanium Studio 概述 TitaniumStudio是Appcelerator公司开发的一款基于Eclipse的,使开发者利用Javascript来快速开发移动应用程序的跨平台的集成 ...

  7. hibernate的一种报错

    Exception in thread "main" java.lang.NoClassDefFoundError: javax/tools/StandardJavaFileMan ...

  8. Android两个页面之间的切换效果工具类

    import android.annotation.SuppressLint; import android.app.Activity; import android.content.Context; ...

  9. Socket支持多用户并发访问的解决办法

    //创建线程池,池中具有(cpu个数*50)条线程 ExecutorService executorService = Executors.newFixedThreadPool(Runtime.get ...

  10. 百度star编程赛-练习1

    ztr loves math http://acm.hdu.edu.cn/showproblem.php?pid=5675 显然:4 ^ n * (a + b) * (a -b) #include & ...