前端工作中,设计代码时,经常会有人手动删除行内元素之间产生的额外空隙,并通过设置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
*请认真填写需求信息,我们会在24小时内与您取得联系。