CSS基础篇--如何解决inline-block元素的空白间距

JowayYoung 发布于2019-08-28 18:16 / 1254人阅读

摘要：先看结构代码在的元素之间存在的空白如图第一种就是改变结构结构一这种方法接近标签换行格式的写法，也更趋近阅读。当然有些文章介绍使用来解决，这也是跟元素的字号有极大的关系。如果元素是一个，则查找文档内容。如果节点是元素节点，则属性将返回。

早上在博客中有人提了这样一个问题：“li元素inline-block横向排列，出现了未知间隙”，我相信大家在写页面的时候都遇到过这样的情况吧。

我一般遇到这情况都会把li浮动起来，这样就没有间隙。但是解决这个未知间隙，还是有很多办法的，在w3cplus上提供了好几种解决办法。在这总结一下。

先看结构：


  item1
  item2
  item3
  item4
  item5

css代码：

ul {
  list-style: none outside none;
  padding: 10px;
  background: green;
  text-align: center;
}
ul li {
  display: inline-block;
  *display: inline;
  zoom: 1;
  background: orange;
  padding: 5px;
}

在inline-block的元素之间存在“4px”的空白：如图：

第一种就是改变html结构 结构一：


  
  item1

  item2

  item3

  item4

  item5

这种方法接近标签换行格式的写法，也更趋近阅读。

结构二：

结构二和结构一几乎是一样，结束标签的“>”成了另一行的起始标签。

结构三：


  item1
item2
item3
item4
item5

结构三的方法采用的是html的注释的方法，这种方法我想大家不太常见，不过同样能解决我们需要解决的问题。

结构四：

item1
item2
item3
item4
item5

结构四，我想是大家常用来解决这样的问题的方法吧

方法二：负的margin

很多地方讨论使用负的margin来解决，比如说：

ul {
        font-size: 12px;
    }
    ul li {
        margin-right: -4px;
        *margin-right: 0;
    }

这种解决方法并不完美，如果你的父元素设置的字号不一样，可能你的“-4px”就不能解决问题。况且在Chrome中你需要另外设置一个负的margin值才能实现同等的效果。

当然有些文章介绍使用"-0.25em"来解决，这也是跟元素的字号有极大的关系。所以我个人建议不使用负的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下可问题依然存在：

方法四：丢失结束标签


  item1
  
item2
  
item3
  
item4
  
item5

但是这样的方法是不推荐的。

方法五：jquery方法

html结构：


  item1
  item2
  item3
  item4
  item5

css代码：

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代码：

$(".removeTextNodes").contents().filter(function() {
return this.nodeType === 3;
}).remove();

其中contents()方法：查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容。
filter方法：筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

nodeType 属性返回以数字值返回指定节点的节点类型。
如果节点是元素节点，则 nodeType 属性将返回 1。
如果节点是属性节点，则 nodeType 属性将返回 2。
元素或属性中的文本内容,则nodeType 属性将返回 3。

全兼容的样式解决方法

使用纯CSS还是找到了兼容的方法，就是在父元素中设置font-size:0,用来兼容chrome，而使用letter-space:-N px来兼容safari:

.finally-solve {
  letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/
  word-spacing: -4px;
  font-size: 0;
}
.finally-solve li {
  font-size: 16px;
  letter-spacing: normal;
  word-spacing: normal;
  display:inline-block;
  *display: inline;
  zoom:1;
}

问题地址：http://segmentfault.com/q/101...
原文地址：http://www.w3cplus.com/css/fi...

GPU云服务器云服务器 css间距 html块内元素间距鸟哥的服务器篇如何基础篇

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111136.html

知识整理之CSS篇

摘要：如对知识点感兴趣，可移步至知识整理之篇就是针对不同的浏览器或不同版本浏览器写特定的样式达到让浏览器兼容的过程。对于伪元素的定义伪元素在中创建了一些抽象元素，这些对象不存在与常文档流中。隐藏元素的几种方法该属性隐藏元素，单元素在文档流中仍占据 CSS篇主要从CSS兼容、CSS3新特性、CSS选择器、高频属性、高频布局、高频知识点、性能优化等方面进行归纳。如对HTML知识点感兴趣，可移步至...

ermaoL 2019-08-30 15:55 评论0 收藏0
css基础

摘要：在元素之后添加内容控制表单控件的禁用状态。生成相对定位的元素，相对于其正常位置进行定位。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。 CSS display: none; 与 visibility: hidden; 的区别联系：它们都能让元素不可见区别： display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；vi...

JinB 2019-08-30 14:21 评论0 收藏0
解剖CSS布局原理

摘要：前言本文将带你重新认识布局，带你解剖布局原理，前提是你要有基础本文将解除你在布局方面的疑惑。以下将对布局元素和文档流进行详细讲解。而且还能保持文档流，这是其他元素做不到的。前言本文将带你重新认识CSS布局，带你解剖布局原理，前提是你要有基础！本文将解除你在布局方面的疑惑。认识每个布局元素，了解他们的特性，你才知道为什么会是这样的结果。本文内容纯属个人理解，不代表官方。此文主要为理...

李文鹏 2019-08-29 12:28 评论0 收藏0
div+css图片列表布局（二）

摘要：本文默认你已经看过了我的上一篇文章图片列表布局一，接下来我们来实现复杂一点的图片列表布局。以下面的样式为例为了方便，我只列出的布局示例。好了，完美接下来把标题加上图片标题效果如图详细的代码可以参阅上一篇文章图片列表布局一本文默认你已经看过了我的上一篇文章 div+css图片列表布局（一），接下来我们来实现复杂一点的图片列表布局。以下面的样式为例 showImg(https://seg...

iflove 2019-08-30 13:19 评论0 收藏0
div+css图片列表布局（二）

摘要：本文默认你已经看过了我的上一篇文章图片列表布局一，接下来我们来实现复杂一点的图片列表布局。以下面的样式为例为了方便，我只列出的布局示例。好了，完美接下来把标题加上图片标题效果如图详细的代码可以参阅上一篇文章图片列表布局一本文默认你已经看过了我的上一篇文章 div+css图片列表布局（一），接下来我们来实现复杂一点的图片列表布局。以下面的样式为例 showImg(https://seg...

KnewOne 2019-08-01 16:10 评论0 收藏0