css消除inline-block元素之间空隙的方法

最新推荐文章于 2020-09-18 09:56:20 发布
最新推荐文章于 2020-09-18 09:56:20 发布
阅读量587 收藏
点赞数
分类专栏： css 文章标签： HTML css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/one_four_two/article/details/88357794
版权

文章目录

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            width: 500px;
            height: 400px;
            background-color: black;
        }
        .children{
            display: inline-block;
            width: 25%;height:100%;
        }
    </style>
</head>
<body>
    <div class="parent" style="">
        <div class="children" style="background-color: green"></div>
        <div class="children" style="background-color: yellow"></div>
        <div class="children" style="background-color: pink"></div>
        <div class="children" style="background-color: purple"></div>
    </div>
</body>
</html>

div之间有间隙
在这里插入图片描述

方式一：

修改HTML结构将div改成一行

<div class="children" style="background-color: green"></div><div class="children" style="background-color: yellow"></div><div class="children" style="background-color: pink"></div><div class="children" style="background-color: purple"></div>

方式二：

使用float代替display:inline-block

.children{
	/*display: inline-block;*/
	float: left;/*代替 display: inline-block;*/
	width: 25%;height:100%;
}

方式三

在父元素上添加font-size:0

.parent{
    width: 500px;
    height: 300px;
    background-color: black;
    font-size: 0;/*添加此属性*/
}

修改后的效果

在这里插入图片描述

one_four_two
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css如何让块无间隙,CSS 去掉inline-block间隙的几种方法
weixin_42398130的博客
08-04 1975
最近做移动端页面时，经常会用到inline-block元素来布局，但无可避免都会遇到一个问题，就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题，需要把间隙去掉。对于inline-block元素及去掉间隙的方法，在这里做一个简单的总结。inline-block是什么inline-block 即内联块,在CSS的元素分类中可以分成三种：行内元素或者内联元素、块级元素、以及内联...
inline-block空隙之css letter-spacing与字体大小/字体关系数据表
09-25
在多数情况下，设置负值的`letter-spacing`能够有效地减小或消除`inline-block`元素间的空隙，但并非所有浏览器都支持这种做法，尤其是旧版本的IE浏览器（如IE6/7）。 此外，不同字体类型似乎对`letter-spacing`的...
详解CSS 去掉inline-block元素间隙的几种方法
12-13
最近做移动端页面时，经常会用到inline-block元素来布局，但无可避免都会遇到一个问题，就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题，需要把间隙去掉。对于inline-block元素及去掉间隙的方法，在这里做一个简单的总结。 inline-block是什么 inline-block 即内联块,在CSS的元素分类中可以分成三种：行内元素或者内联元素、块级元素、以及内联块元素。 内联块元素具有了内联元素以及块级元素的特性：（1）元素之间可以水平排列 （2）可以当做一个块级元素来设置各种的属性，例如：width、height、padding等。 例子1：定义一个内
css清除间隙
anwei9164的博客
04-22 289
.clear{clear:both;height:0;width:0;line-height:0;overflow:hidden;} 转载于:https://www.cnblogs.com/houweijian/p/3681151.html
如何去除inline-block之间的空隙？
weixin_43912756的博客
09-18 233
<body> <ul class="box"> <li>123</li> <li>456</li> <li>789</li> </ul> </body> .box{ border:1px solid #ccc; padding-left: 4px; } .box>li{ display: inline-block; b
标签设置为inline-block后，如何消除标签之间的间隔。
diaoqi1518的博客
10-21 142
标签设置为inline-block后，如何消除标签之间的间隔。 例如： <div> <ul> <li><a href="#">学习</a></li> <li><a href="#">升职</a></li> <li><...
css之display属性之inline-block布局实现详解
11-21
- **间隙问题**：在`inline-block`元素之间有时会出现4像素的间隙，这是由于换行产生的空白字符导致的。 - **去除空隙的方法**： - 对父元素设置`font-size: 0`，这样空白字符的大小也会变为0，消除间隙。 - ...
深入解析CSS的display:inline-block属性的使用
12-02
在CSS布局中，`display:inline-block` 是一个非常重要的属性，它允许元素既有块级元素的特性，又能像内联元素一样并排显示。本文将深入解析`display:inline-block`的使用及其与其他属性的交互。 首先，`display:...
深入了解float与inline-block
12-13
使用`inline-block`的元素之间可能会出现空隙，这是由于HTML的空白字符造成的。可以通过设置父元素的`font-size: 0`来消除这些空隙，但需要注意的是这可能会导致字体相关的样式问题。当然，还有其他方法可以避免这种...
Justify:一款实现inline-block元素两端对齐布局的javascript插件(a javascript plug-in implementation inline-block elements full-justified layout)
04-28
元素均分宽度、两端自适应对齐的布局在移动web项目中的需求还是挺多的，使用inline-block元素，配合text-align:justify，再注意处理好一些细节问题，便可以在现代浏览器上实现两端对齐，但是最后一行的处理却是个...
带你深入剖析inline-block属性值的前世今生
09-25
在使用`inline-block`时，元素之间常常会出现意外的水平空隙，这通常是因为元素间的空白字符。解决这个问题的方法包括： - 将元素间的空格或换行符删除或合并。 - 使用负的`margin`来抵消空隙。 - 使用父元素的`...
display:inline、block、inline-block的区别（转的）
08-07
3. 由于是行内元素，所以它们之间可以不留空隙地紧密排列，但可以通过修改`whitespace`属性控制间距。 4. 不像`block`元素那样默认占据整行，而是根据内容和设置的尺寸来确定占用的空间。 在实际开发中，选择合适的...
inline-block 前世今生1
08-08
当元素使用display:inline-block时，有时会出现元素间的水平空隙。这是因为元素默认遵循文本的换行规则，导致元素之间存在与字体相关的间距。解决这个问题的方法包括使用负margin、设置父元素的font-size为0，或者...
css下div下同行多元素右对齐
11-19
在 CSS 中，实现多元素右对齐是非常常见的需求，而今天我们将讨论两种实现方法：float:right 和 display:inline-block+text-align:right。 方法一：float:right float:right 是一种常见的实现多元素右对齐的方法，...
Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt
07-30
（3）行内块 元素 display：inline-block√、 单行文字垂直居中 文字的行高line-height=盒子高度 仅限于单行文字垂直居中 3.css的背景属性 （1）背景颜色 选择器{ background-color： transparent透明（透明）/...
CSS：去除图片底侧缝隙
tiandaochouqin_1的博客
03-06 462
问题：图片或者表单等行内块元素，它的底线会和父级盒子的基线对齐，这样会造成图片底侧会有一个空白缝隙。 解决方法： ①display:block; 转换为块级元素 ②vertical-align:top;middle; 因为默认是baseline（ div内的img 和 div 的基线对齐 ），所以会有缝隙。 ...
inline-block 元素间存在空隙
齐逸安的博客
06-09 281
inline-block 元素间存在空隙的解决办法将元素的 display 属性设置为 inline-block 时，inline-block 元素之间会呈现出几像素的空隙。
css去掉inline-block元素间隙的几种方法
weixin_38098192的博客
06-19 2779
间隙是由换行或者回车导致的，只要把标签写成一行或者标签直接没有空格就不会出现间隙。移除inline-block元素间隙方法（1）移除标签间的空格元素间的间隙出现的原因是元素标签之间的空格，把空格去掉间隙自然就会消失。来看以下几种写法：*写法一：&lt;div class="demo"&gt; &lt;span&gt;我是一个span&lt;/span&gt;&lt;span&gt;...
去除inline-block元素间间距的方法
热门推荐
Potry Code的博客
09-02 1万+
目录：一、现象描述二、解决方法方法1：各元素间不留任何空格方法2：使用margin负值方法3：在父元素上设置font-size:0方法4：使用letter-spacing或者word-spacing 一、现象描述 inline-block是一个块状行盒，表现为一个行内元素，它既拥有了块状元素可以设置width和height的特性，又保留了行内元素不换行的特点。 而当我们去使用它时候会发现各元素之间...
CSS之使用display:inline-block来布局
最新发布
06-10
使用 `display: inline-block` 可以将元素设置为行内块级...不过需要注意，使用 `inline-block` 布局时，需要处理好元素之间的空隙问题，一种方法是将父元素的字体大小设置为 0，另一种方法是将元素之间的空隙注释掉。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值