应该是连在一起的啊 为什么会这样呢？
极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div,span{margin:0 ;padding:0}
#right{width: 240px;height: 50px;}
#right span{width: 60px;height: 50px;display: inline-block;background-color: blue;}
</style>
</head>
<body>
<div id="right">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
</html>也可以选择这么写……
html5
<div id="right">
<span>1</span><!--
--><span>2</span><!--
--><span>3</span><!--
--><span>4</span>
</div>解决inline-block元素的空白间距
方法一：改变HTML结构
简单一点的方法就是就是改变HTML的结构，你可以使用下面几种方法的任何一种都可以达到效果：
结构一
<ul>
<li>
item1</li><li>
item2</li><li>
item3</li><li>
item4</li><li>
item5</li>
</ul>
这种方法接近标签换行格式的写法，也更趋近阅读。
结构二
<ul>
<li>item1</li
><li>item2</li
><li>item3</li
><li>item4</li
><li>item5</li>
</ul>
结构二和结构一几乎是一样，结束标签的“>”成了另一行的起始标签。
结构三：
<ul>
<li>item1</li><!--
--><li>item2</li><!--
--><li>item3</li><!--
--><li>item4</li><!--
--><li>item5</li>
</ul>
结构三的方法采用的是html的注释的方法，这种方法我想大家不太常见，不过同样能解决我们需要解决的问题。
结构四：
<ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul>
方法一所说的是通过标签来解决，虽然问题是解决了，但可以说不能称作是技巧。而且上面的方法只适合于写静态页面的时候，一旦你的HTML不是自己写，而是后台生成，就比如CMS来说，标签后台生成，此时，我想大家又要骂街了，这可怎么办？其实我们除了上面的方法，还可以使用CSS来解决的。
方法二：负的margin
ul {
font-size: 12px;
}
ul li {
margin-right: -4px;
*margin-right: 0;
}
这种解决方法并不完美，如果你的父元素设置的字号不一样，可能你的“-4px”就不能解决问题。况且在Chrome中你需要另外设置一个负的margin值才能实现同等的效果。
方法三：设置父元素字体为0
第三种方法设置父元素的字体为“0”，然后在“inline-block”元素上重置字体需要的大小。
ul {
list-style: none outside none;
padding: 10px;
background: green;
text-align: center;
font-size: 0px;
}
ul li {
display: inline-block;
*display: inline;
zoom: 1;
background: orange;
padding: 5px;
font-size: 12px;
}
这样处理在Firexfox,chrome等浏览器下是达到了效果，可是在Safari下可问题依然存在。
方法四：丢失结束标签
说实在的，这种方法又回到了方法一，在html标签上动手脚。就是让“inline-block”元素丢失关闭标签
<ul>
<li>item1
<li>item2
<li>item3
<li>item4
<li>item5
</ul>
这种方法虽然能达到各浏览器的兼容，但还是有一个前提，那就是“DOCTYPE”要选择对，在“XHTML”下可就问题又出来了。
方法五：jquery方法
HTML Markup
<ul class="removeTextNodes">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
CSS Code
ul {
list-style: none outside none;
padding: 10px;
background: green;
text-align: center;
font-size: 12px;
}
ul li {
display: inline-block;
*display: inline;
zoom: 1;
background: orange;
padding: 5px;
}
jQuery Code
$('.removeTextNodes').contents().filter(function() {
return this.nodeType === 3;
}).remove();
上面讲述了多种方法，但要兼容多个浏览器版本，并不每种方法实用，以前常用的方法，这次测试并不兼容所有浏览器。要做到兼容所有浏览器，个人认为还是在html的标签上做一定的处理，或者采用最后一种方法，通过“jQuery”来改变“nodeType”值达到效果。针对这个“inline-block”之间的间距有几篇文章做过介绍，但里面的方法，和上面介绍的测试的基本一样，具体如何运用，大家还是根据自己的需求进行选择或处理。
在父元素上加font-size:0;子元素再加上font-size
#right{width: 240px;height: 50px;font-size:0;}
#right span{width: 60px;height: 50px;display: inline-block;background-color: blue;font-size:12px;}
6 回答5.1k 阅读✓ 已解决
5 回答8.1k 阅读✓ 已解决
5 回答7.7k 阅读
4 回答8.8k 阅读
3 回答6.6k 阅读✓ 已解决
4 回答11.2k 阅读
3 回答1.9k 阅读✓ 已解决
是因为有换行符，这样写就没有间隙了：