您的位置：首页 > 其它

两个 display: inline-block 元素间的间隔移除问题

2015-03-27 20:44 465 查看
一、问题现象

在插入的inline-block元素在一行显示，默认时，换行显示或空格分隔的情况下会有间距。（浏览器：chrome/firefox/IE）

开始，我以为这是某种bug,直到看到张大神文章里这句话（这种表现是符合规范的应该有的表现（如果有人认为是bug就太()ay ()oy 了）。）o(╯□╰)o

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inline-bolock</title>
<style type="text/css">
*{margin:0;padding: 0;}
.wrap{margin:0 auto;
width:400px;
background:#f1f8e9;
color:black;
font-weight: bolder;}
.box{
display: inline-block;
width: 150px;
height:200px;
background:#7cb342;}
</style>
</head>
<body>
<div class="wrap">
<span>hello,good evening,michael~</span>
<br>
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
</div>
</body>
</html>




二、解决的办法

1、在inline-block元素下，比如，上述代码，div元素的结束要和下一个div元素的开始写在一行（其实，就是为了移除空格）

<div class="wrap">
<span>hello,good evening,michael~</span>
<br>
<div class="box">box1</div><div class="box">
box2</div><div class="box">
box3</div>
</div>


或者

<div class="wrap">
<span>hello,good evening,michael~</span>
<br>
<div class="box">box1</div
><div class="box">box2</div
><div class="box">box3</div>
</div>


此时，效果图如下：



ps:发现的新问题，上下div之间有间隔，当删除box文字时，间隔就出来了，解决办法是在box元素里加verticle-align:middle;

2.在父元素加上font-size:0;



根据阅读张大神的文章，我知道了怎么恢复box里的内容了，嘿嘿，就是在box里再定义字号大小，好吧这么简单我也没想到，菜鸟毕竟还是菜鸟。

.wrap{margin:0 auto;
width:400px;
background:#f1f8e9;
color:black;
font-size:0;
/*-webkit-text-size-adjust:none;*/
font-weight: bolder;}
.box{             display: inline-block;
font-size:6px;
width: 150px;
height:200px;
background:#7cb342;}




3.对于内联元素可以省略闭合标签。

<div class="space">
<a href="##">惆怅
<a href="##">淡定
<a href="##">热血</a>
</div>

4.使用word-spacing

类似下面代码：

.space {
word-spacing: -6px;
}
.space a {
word-spacing: 0;
}


一个是字符间距(
letter-spacing
)一个是单词间距(
word-spacing
)，大同小异。据我测试，
word-spacing
的负值只要大到一定程度，其兼容性上的差异就可以被忽略。因为，貌似，
word-spacing
即使负值很大，也不会发生重叠。

这种方法，我不知道为什么我没有实现效果。

参考链接：http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航