html+css如何删除行内元素之间的空白/空隙

标签: 行内元素空隙空白   时间:2017-10-19
在编写前端HTML和css时,将两个行内元素(display:inline-block)放在同一行,并且元素的margin和padding都为0,但是两元素之间有白色的空格。如何解决这个问题呢?请仔细阅读本文章。

html和css如下:

<p>
    <span> Foo </span>
    <span> Bar </span>
</p>
span { 
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}

效果如下:

html+css如何删除行内元素之间的空白/空隙

SPAN元素之间将会有一个4px宽度的空白。

如何解决呢?

 

首先我们需要分析出现这种问题的原因在哪里。

因为span是行内元素,这意味着就和一个字符一样,而不管两个字符相距多远,对于浏览器来说只会解析为一个空格, 比如上述代码,换了一行,也算是一个空格,那一段空白就是这么来的.

知道了原因,那么解决的方法就有了。

 

第一种方法:

将两个span元素放在同一行,不要换行。如:

<p>
    <span>Foo</span><span>Bar</span>
</p>

 

第二种方法:

将p元素的font-size设置为0,然后将span的font-szie设置为指定像素。如:

span { 
    display:inline-block;
    width:100px;
    background-color:palevioletred;
    font-size:14px;
}
p{
    font-size:0px;
}

<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

 

第三种方法:

使用display: table;和display: table-cell;属性代替display: inline-block;

p {
  display: table;
}
span {
  width: 100px;
  border: 1px solid silver; /* added for visualization only*/
  display: table-cell;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

 

第四种方法:

在p元素上加上display: flex属性

p {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: blue;
  font-size: 30px;
  color: white;
  text-align: center;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

 
虽然这些方案都不是很理想,但是如果不这样处理,那你的HTML代码结构可能就非常混乱,成为标准的垃圾代码。 

因为行内元素非常好用,所以这并不是一个小心避免的雷区,作为开发人员,学会处理这种空白问题也是很重要的 。

原文地址:http://www.manongjc.com/article/2171.html

上一篇:分享php多文件上传实现源码

下一篇:已是最后一篇