连续几个内联标签或表单元素标签的换行在浏览器会被解释为一个空格。

比如下面代码：

<span style="border:1px solid #f20">hello</span>

<span style="border:1px solid #f20">world</span>

显示如图：

上图中的间距不是margin边距，而是空格。

解决如下：

给父元素添加“font-size:0;”再设置子元素的字体大小就ok了。

<div class="demo" style="font-size:0;">

	<span style="border:1px solid #f20;font-size:16px;">hello</span>

	<span style="border:1px solid #f20;font-size:16px;">world</span>

</div>

结果：

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

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

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

  2. ajax返回值中有回车换行、空格的解决方法分享

    最近在写一个页面,用jquery ajax来实现判断,刚写好测试完全没有问题,过了两天发现出现问题,判断不成了.后来发现所有alert出来的返回值前面都会加若干换行和空格.(至今不明白,同一台电脑,同 ...

  3. ajax返回值中有回车换行、空格解决方法

    最近在写一个页面,用jquery ajax来实现判断,刚写好测试完全没有问题,过了两天发现出现问题,判断不成了.后来发现所有alert出来的返回值前面都会加若干换行和空格.(至今不明白,同一台电脑,同 ...

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

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

  5. 回车、换行、空格的ASCII码值—（附ASCII码表）

    回车.换行.空格的ASCII码值 回车,ASCII码13换行,ASCII码10空格,ASCII码32 Return   =   CR   =   13   =   '\x0d'NewLine   = ...

  6. 解决Python print输出不换行没空格的问题

    今天在做编程题的时候发现Python的print输出默认换行输出,并且输出后有空格. 题目要求输出 122 而我的输出是: 1 2 2 于是我百度查到取消print自动换行的方法:就是在print的值 ...

  7. Django admin实现TextField字段changelist页面换行、空格正常显示

    问题背景 在Django后台的使用admin view绑定model后,可以很方便的通过网页对底层的数据表进行增删查改操作. 在实际工作中有一些数据字段会存储了json或者其他包含换行符.空格符的文本 ...

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

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

  9. PHP压缩html网页代码原理(清除空格,换行符,制表符,注释标记)

    本博启用了一个叫wp super cache的页面压缩工具, 源代码没有去查看,不过原理很简单. 我们可以自己动手书写一个压缩脚本. 清除换行符,清除制表符,去掉注释标记 .它所起到的作用不可小视. ...

随机推荐

  1. J2EE [web] 403.500.404页面配置

    如果想让系统在出错后,看到自定义的错误提示页面,而不是满屏错误原因以及代码. 1.web.xml中 <error-page> <error-code>403</error ...

  2. rocketMQ安装部署详细解析

    近来研究了Apache开源项目rocketMQ(原为阿里项目),并在两台linux服务器上完成了部署,现在整理下,供大家参考学习. 一.简介rocketMQRocektMQ是阿里巴巴在2012年开源的 ...

  3. mongo笔记2

    速度和持久性 用户可以选择写入语义,决定是否开启journaling日志记录,通过这种方式来控制速度和持久性的平衡,默认情况下写入都是fire-and-forget,写操作通过tcp套接字发送,不要求 ...

  4. ES6 数组

    数组创建 Array.of() 将参数中所有值作为元素形成数组. console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4] // 参数值可为不同类型 con ...

  5. here文档 here doc EOF重定向

    here文档  here doc EOF重定向 http://www.cnblogs.com/xiangzi888/archive/2012/03/24/2415077.html 在shell脚本程序 ...

  6. 详细解读html中的Map,area标签

    一.定义 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 二.使用 <!--定义一个图像 他的边框为0(border) usemap(指定该图像被用作图像地图 ...

  7. 免费的文件比较工具和beyondcomare和source insight的比较工具

    Linux下,meld就够了,命令行用用diff也行,kdiff3也不错. 参考 http://www.cnblogs.com/itech/archive/2009/08/13/1545344.htm ...

  8. java之WebService

    链接:https://www.jianshu.com/p/1c145315da47 WebService介绍 首先我们来谈一下为什么需要学习webService这样的一个技术吧.... 问题一 如果我 ...

  9. tensorflow输出

    在Session对象上调用run()函数,执行流图,即可得到输出, 可获取单个输出,也可获取多个输出 import tensorflow as tf import numpy as np consta ...

  10. Lucky 7 (容斥原理 + 中国剩余定理)

    题意:求满足7的倍数,不满足其他条件num % p == a 的num的个数. 思路:利用中国剩余定理我i们可以求出7的倍数,但是多算了不满足约定条件又得减去一个,但是又发现多减了,又得加回来.如此, ...