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

比如下面代码:

<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. Nginx负载均衡后端健康检查

    参考文档:https://www.cnblogs.com/kevingrace/p/6685698.html 本次使用第三方模块nginx_upstream_check_module的,要使用这个第三 ...

  2. Nginx之编译安装的nginx加入systemctl

    编译安装的nginx需要添加rc.local 编译安装后设置 /usr/lib/systemd/system/nginx.service [Unit] Description=nginx After= ...

  3. 【立体几何】分类讨论很细节 Gym - 101967I Путешествие по тору

    http://codeforces.com/gym/101967/attachments 题意:定义了一个甜甜圈.(torus) 不是让你二重积分啦233 现在有一个星球是甜甜圈形状的,它有四条很关键 ...

  4. iOS 线程安全--锁

    一,前言 线程安全是iOS开发中避免了的话题,随着多线程的使用,对于资源的竞争以及数据的操作都可能存在风险,所以有必要在操作时保证线程安全. 二,为什么要使用锁? 由于一个进程中不可避免的存在多线程, ...

  5. linux系统644、755、777权限详解

    在linux系统中644.755.777三种权限是非常重要的一些权限了,下面我来详细的介绍644.755.777三种权限的使用,希望对各位有帮助. 常用的linux文件权限:444 r--r--r-- ...

  6. scrapy item pipeline

    item pipeline process_item(self, item, spider) #这个是所有pipeline都必须要有的方法在这个方法下再继续编辑具体怎么处理 另可以添加别的方法 ope ...

  7. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

  8. Porsche Piwis Tester II V14.000 with CF30 Laptop at autonumen.com

    Porsche piwis tester ii is the latest professional tester for Porshe,the most poweful diagnose and o ...

  9. perl 用网易发邮件报错 554 DT:SPM 163 smtp14

    查看相关链接,貌似被当成垃圾邮件了,发不出去 554 DT:SPM 163 smtp14,EsCowACHUegmKpdc3giRMQ--.29617S2 1553410599,please see ...

  10. django开发(二)

    1.django数据库操作---model的使用以及django自带的数据api django中已经做了ORM,表就是一个类class,表中的一个项就是一个对象object,很好用 1.1django ...