如何取消inline-block元素的空隙?

时间: 2020-02-26阅读: 101标签: 元素

最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题,需要把间隙去掉。对于inline-block元素及去掉间隙的方法,在这里做一个简单的总结。


inline-block是什么?

inline-block 即内联块,在css的元素分类中可以分成三种:行内元素或者内联元素、块级元素、以及内联块元素。

内联块元素具有了内联元素以及块级元素的特性:(1)元素之间可以水平排列 (2)可以当做一个块级元素来设置各种的属性,例如:width、height、padding等。

例子1:定义一个内联元素span为inline-block元素

<!DOCTYPE html >
<html>
<head>
<style type="text/css">
div{
    background: red;
    display:inline-block;   
}
</style>
</head>
<body>
<div>这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
</body>
</html>


移除inline-block导致div间隙的方法:

1、移除标签间的空格

元素间的间隙出现的原因是元素标签之间的空格,把空格去掉间隙自然就会消失。

<!DOCTYPE html >
<html>
<head>
<style type="text/css">
div{
    background: red;
    display:inline-block;   
}
</style>
</head>
<body>
<div>这是一个div</div><div>这是一个div</div><div>这是一个div</div>
</body>
</html>


2、将所有div放到同一个div中

<!DOCTYPE html >
<html>
<head>
<style type="text/css">
div{
    
    background: red;
    display:inline-block;       
}
</style>
</head>
<body>
    <div>
        <div>这是一个div</div>
        <div>这是一个div</div>
        <div>这是一个div</div>
    </div>
</body>
</html>



3、通过设置父元素的font-size:0来解决这个问题

该方法适用于只包含图片的div


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9160

css按状态选择链接元素

CSS允许根据链接的当前状态对它们进行格式化。链接的状态包括访问者是否将鼠标停留在链接上,链接是否被访问过 ,等等。可以通过一系列伪类实现这一特性。

什么是可替换元素?

请问什么是可替换元素和非可替换元素,它们的差异是什么?并举例说明。前端面试中 HTML 的题目本来就最少,而且并不难,翻来覆去也就那几样。我们之前已经谈到过最经典的 HTML 语义化 ,今天就借此机会来谈谈可替换元素。

h5中的结构元素介绍

结构元素不具有任何样式,只是使页面元素的的语义更加明确。header元素是一种具有引导和导航作用的的结构元素,该元素可以包含所有通常放在页面头部的内容。header元素通常用来放置整个页面或页面内的一个内容区块的标题

Css元素的显示与隐藏

在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow。他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除。 最常见的是网站广告,

使用document.querySelector获取元素

使用 document.querySelector() 和 document.querySelectorAll(), 将 CSS选择器 作为参数传入即可;注意: querySelecotor()返回某个元素节点, querySelectorAll()返回一个NodeList实例对象;

jQuery绑定动态元素的点击事件无效

之前就一直受这个问题的困扰,在写ajax加载数据的时候发现,后面追加进来的demo节点元素,失去了之前的点击事件。为什么点击事件失效,我们该怎么去解决呢?那么,我们通过下面的示例简单说明。

JS 创建元素的三种方法

动态创建元素一 document.write()body标签中就会插入但是这种方法几乎不用,因为这回影响页面的布局,甚至会将页面原来的内容冲刷掉,从而只显示输出内容;动态创建元素二 innerHTML

angular怎么删除(remove)元素?

angular删除(remove)元素可以使用angular.element中的remove()方法,此方法可以将匹配元素集合从DOM中删除(同时移除元素上的事件及jQuery数据)。

如何用 CSS 强调标记文本元素?

当我们在 Web 上做文本编辑器时,最常见的一个场景便是和文字样式打交道了。比如像语文课本那样需要在每篇文章要学习的生字上标上一个小黑点,这个时候就该用到 CSS 中 text-emphasis-style 这个属性。

CSS隐藏页面元素常用方法_不同场景下使用CSS隐藏元素

使用 CSS 让元素不可见的方法很多,剪裁、定位到屏幕外、明度变化等都是可以的。虽然它们都是肉眼不可见,但背后却在多个维度上都有差别

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广