这几个span之间为什么会有空隙呢?

3521200
  • 351

应该是连在一起的啊 为什么会这样呢?
图片描述

<!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>
回复
阅读 7.9k
10 个回答

是因为有换行符,这样写就没有间隙了:

<span>1</span><span>2</span><span>3</span><span>4</span>

解决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;}

 <span>1</span
><span>2</span
><span>3</span
><span>4</span>

我一般写成这样

也可以选择这么写……

<div id="right">
  <span>1</span><!--
  --><span>2</span><!--
  --><span>3</span><!--
  --><span>4</span>
</div>

因为你的display:inline-block导致的,再给span添加一个属性,font-size:0px就可以了

如果是排列的,直接float left 即可消除空隙并且不需要关注空格

换行空格都会被当成一个空格。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏