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

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

比如下面代码：

<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>

结果：

时间： 2024-10-29 00:37:37

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

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

Html中代码换行造成空格间距的问题解析解决方法: 一.简单粗爆不换行写代码的时候不要换行,input等在一行输写,那么将解决该问题.但是代码就变得不再那么容易好看. 二.设置父级块的字体大小为0 这样也能解决问题,代码也好看,但是当你设置了父级的字体大小为0时,你里面又要其它字体要显示,可能就得加span等标签去包裹它,并且重新设置字体大小.三:设置margin-left为-3象素使得该元素基于原来的位置向左偏移三个象素,也就看不出有空隙了. 对于html内置的内联级标签以及表单元素标签

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

这篇文章主要介绍了ASP.NET过滤HTML标签只保留换行与空格的方法,包含网上常见的方法以及对此方法的改进,具有一定的参考借鉴价值,需要的朋友可以参考下本文实例讲述了ASP.NET过滤HTML标签只保留换行与空格的方法.分享给大家供大家参考.具体分析如下: 自己从网上找了一个过滤HTML标签的方法,我也不知道谁的才是原创的,反正很多都一样.我把那方法复制下来,代码如下: /// <summary> /// 去除HTML标记 /// </summary> /// <para

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

回车.换行.空格的ASCII码值回车,ASCII码13换行,ASCII码10空格,ASCII码32 Return = CR = 13 = '\x0d'NewLine = LF = 10 = '\x0a' ASCII码表信息在计算机上是用二进制表示的,这种表示法让人理解就很困难.因此计算机上都配有输入和输出设备,这些设备的主要目的就是,以一种人类可阅读的形式将信息在这些设备上显示出来供人阅读理解.为保证人类和设备,设备和计算机之间能进行正确的

myeclipse格式化代码换行的问题

在我们使用myeclipse按下ctrl+shift+f进行代码格式化的时候,有时候会出现代码换行的情况,对于具有代码强迫症的我来说,看上去很不舒服,这里就记录下怎么解决,都是一些小问题,没有什么技术含量 java代码的解决方法: 依次在工具栏按如下顺序打开,window-perference-java-CodeStyle-Formatter,然后在弹出的窗口里面找到edit按钮,点击之后再找打lineWrapping一项,将generalSettings里面的maximumLineWidth最

HTML代码中的空格和空行

HTML 代码中的所有连续的空格或空行(换行)都会被显示为一个空格. 例子1:(文本内容中的连续空格) 代码 这段文本中,输入连续的空格大概输入了十个. 显示效果:“格”和“大”之间的是个空格显示出来只是一个空格. 这段文本中,输入连续的空格大概输入了十个. 例子2:(代码之间的连续空格) 代码 span是一个行内标签 和前面的span元素之间隔了很多个空格 显示效

asp.net过滤HTML标签，只保留换行与空格

自己从网上找了一个过滤HTML标签的方法,我也不知道谁的才是原创的,反正很多都一样.我把那方法复制下来,代码如下: /// <summary> /// 去除HTML标记 /// </summary> /// <param name="NoHTML">包括HTML的源码 </param> /// <returns>已经去除后的文字</returns> public static string NoHTML(strin

[转]回车、换行、空格的ASCII码值—（附ASCII码表）

回车,ASCII码13,"\r"换行,ASCII码10,"\n"空格,ASCII码32 Return = CR = 13 = '\x0d'NewLine = LF = 10 = '\x0a' 回车符号和换行符号产生背景关于“回车”(carriage return)和“换行”(line feed)这两个概念的来历和区别.在计算机还没有出现之前,有一种叫做电传打字机(Teletype Model 33)的玩意,每秒钟可以

shell去除换行和空格2

#!/bin/bash if [ -f str.txt ] ## 如果str.txt存在,则返回true then strval=$(cat str.txt|awk '{printf "%s ",$1}'|sed 's/ //g') ## 使用awk去除换行,使用sed去除空格 if [ "" == "$strval" ] ## 判断文件是否为空 then echo "empty" elif [ "all"

保留多行文本框的换行与空格样式，并转义HTML标记的尖括号

本文采用JavaScript进行演示,这并不影响你在项目中的实际应用,因为我提供的思路,你可以轻易地把它用你自己的语言进行实现,这通常是后台语言,而且下面提供的正则表达式你几乎可以完全照搬,因为正则表达式是通用的. 作者:WebFlash出处:http://webflash.cnblogs.com 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 一.需求来源假如在你的一个网站项目中,你需要提供一个留言入口,你