整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

如何处理html中内联元素之间水平空隙?

前端工作中,设计代码时,经常会有人手动删除行内元素之间产生的额外空隙,并通过设置margin或padding来获取想要间距吗?如代码:

<div class=“”><span class=“bgr”>去掉了间距</span><span class="bgr">去掉了间距</span><span class="bgr">去掉了间距</span><span class="bgr">去掉了间距</span><span class="bgr">去掉了间距</span><span class="bgr">去掉了间距</span></div>

这看起来很不舒服,特别扔给给JS同事后,JS同事看完代码后就会提出抱怨,代码太乱,他们希望的代码是如下:

<div class="">
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
</div>

那么有什么好的办法解决的?答案也是有的。

1.行内元素之间的“换行符”产生间距

<div class="">

<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
</div>

展现效果如下:

2.行内元素之间使用“tab(制表符)”产生间距

<div class="">
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
</div>

展现效果如下:

3.行内元素之间使用“空格”产生间距

<div class=""><span class="bgr">换行符产生间距</span> <span class="bgr">换行符产生间距</span> <span class="bgr">换行符产生间距</span> <span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span> <span class="bgr">换行符产生间距</span>
</div>

展现效果如下:

上以上3点可以看出,行内元素之间产生的间距,是由于换行符、tab(制表符)、空格等字符引起,而字符的大小是定义字体大小来控制。

那么改变字体的大小可调整行内元素的间距么?

上图把字体从0px~18px~36px的调整,可见行内元素之间的水平间距从无到有,并不断变大,说明行内元素之间产生间距是由换行符、tab(制表符)、空格等字符引起的,那么设置字体大小font-size:0可以是不是可以在所有浏览器中除去这些间距呢?

经过测试后,可发现设置font-size:0并不能使得换行符、tab(制表符)、空格等在所有浏览器中产生的额外间距消失:

1.IE6、7浏览器始终存在的 1px 空隙

2.最新版本的Safari浏览器(5.1.7)不支持定义字体大小为 0 的浏览器

通过查找资料后,一种比较正常的解决方法如下:

1.针对IE6、7浏览器,使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙,减少单词间的空白(即字间隔)

*word-spacing:-1px;

2.使用webkit的私有属性,让字体大小不受设备终端的调整,可定义字体大小小于12px

html{-webkit-text-size-adjust:none;}

问题解决了,代码如下:

结构:

<div class="span-wrap">
<span>字符产生间距</span>
<span>字符产生间距</span>
<span>字符产生间距</span>
<span>字符产生间距</span>
<span>字符产生间距</span>
<span>字符产生间距</span>
</div>

样式:

html{
-webkit-text-size-adjust:none;/* 使用webkit的私有属性,让字体大小不受设备终端的调整,可定义字体大小小于12px */
}

.span-wrap {
font-size:0;/* 所有浏览器 */
*word-spacing:-1px;/* 使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙,减少单词间的空白(即字间隔) */
}

.span-wrap span{
font-size: 12px;
letter-spacing: normal;/* 设置字母、字间距为0 */
word-spacing: normal; /* 设置单词、字段间距为0 */
}

干脆直接使用浮动,简单,也不用写多余的hack,多好。的确使用浮动技术是比较好的办法,实际工作中我们使用浮动也是比较多,但是也并不是每处地方都要使用浮动,而且使用浮动后还需要清除浮动的操作。

文/丁向明

做一个有博客的web前端自媒体人,专注web前端开发,关注用户体验,加我qq/微信交流:6135833

http://dingxiangming.com

lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>网站页面</title>

<style type="text/css">

* {

margin: 0px;

padding: 0px;

border-top-width: 0px;

border-right-width: 0px;

border-bottom-width: 0px;

border-left-width: 0px;

}

body {

background-color: #FFFFFF;

text-align: center;

font-family: "宋体";

font-size: 12px;

color: #575757;

}

#banner {

height: 210px;

width: 982px;

margin: 0 auto;

}

#menu {

height: 87px;

width: 982px;

margin: 0 auto;

}

</style>

</head>

<body>

<div id="box">

<div id="banner"><img src="images/203.jpg" width="982" height="210" alt="banner" /></div>

<div id="menu"><img src="images/204.jpg" width="223" height="80" alt="gamestart" />

<img src="images/205.jpg" width="106" height="80" alt="menu1" />

<img src="images/206.jpg" width="102" height="80" alt="menu2" />

<img src="images/207.jpg" width="105" height="80" alt="menu3" />

<img src="images/208.jpg" width="100" height="80" alt="menu4" />

<img src="images/209.jpg" width="77" height="80" alt="menu5" />

<img src="images/210.jpg" width="86" height="80" alt="menu6" />

<img src="images/211.jpg" width="77" height="80" alt="menu7" />

<img src="images/212.jpg" width="106" height="80" alt="menu8" /></div>

</div>

</body>

</html>

根据我们的案例,边框、边界、边距都设置成0了,图片与图片之间还是有空隙,这是为什么呢?

记得之前解决的方法是,img标签符之间不要有空格或者回车。

就是写成这样的

还有些其他的方法,可以让其在水平方向上不留下空隙,也就是左右的空隙,比如

#menu { font-size:0;} //意思是父级元素的字体大小为0,img默认是根据父元素的baseline进行对齐的,把父元素的字体大小设置为0,就没有空隙了,作为子元素的img对齐相应的也就没有空隙了

#menu {letter-spacing:-600px}

0

本例参考了网上的例子,唯一不一样的是,我这里的操作是一步一步讲解,网上仅是源码。

一、我们先创建一张空白的网页,网页要自适应手机。

图1

二、我们再创建网页的头部。

图2

图3

三、做出来的网页头部太丑了,我们要去掉盒子与浏览器的间隙,还有给头部加内部距离。

图4

图5

四、给网页头部添加一些内容。

图6

图7

五、接下来开始做导航条了。

图8

图9

六、发现没,导航条居然看不见,没有东西在里面自然是看不见的,我们加三个链接吧。

图10

图11

七、这回是看见了,不过样式太丑,我们改改样式。

图12

图13

八、加上内部距离,就好看了许多,即然是链接,我们加点动态吧,当鼠标在链接上面时,链接块变色。

图14

图15

九、开始做网页内容,网页内容我分为三块,左右两边是侧栏,中间是主要内容。

图16

图17

十、我想让它横着排,它却是竖着排,改改各个块的样式。

图18

图19

十一、给主体的各个块加点内容。

图20

图21

十二、内容是有了,但你会发现各块之间没有间隙,贴得太近了,我们改一下样式,加个内部距离。

图22

图23

十三、距离是有了,但有一个侧栏跑到了另一行,怎么回事?原来padding是会改变盒子的整体宽度,我们原本是100%,现在多了padding的宽度,自然就换行了,解决一下吧。

图24

图25

十四、这回终于在一行了,接下来可以做网页底部了。

图26

图27

十五、改改样式,让底部好看一点。

图28

图29

十六,这个时候,网页的整体版面就完成了,再补充一个小内容,让网页浏览器在小于600像素宽的时候,主体内容的三个块由横变竖。

图30

图31