display:inline-block 去除间隙

简介: 先写出代码 核心css代码: .sample0{display: inline-block;height: 40px;width: 40px;color: #ffffff;background-color: red; text-align: center;font-size: 26px;}.

先写出代码


image

核心css代码:

.sample0{display: inline-block;height: 40px;width: 40px;color: #ffffff;background-color: red; text-align: center;font-size: 26px;}
.sample1{display: inline-block;height: 40px;width: 40px;color: #ffffff;background-color: orange;text-align: center;font-size: 26px;
.sample2{display: inline-block;height: 40px;width: 40px;color: #ffffff;background-color: blue;text-align: center;font-size: 26px;}

核心html代码:

<div class="sample0">0</div>
<div class="sample1">1</div>
<div class="sample2">2</div>

 

 

 

问题: display:inline-block的块之间,有空隙


image

 

原因:换行显示或空格分隔

 

解决方案一:margin 设置负值

核心 css 代码

.sample0{display: inline-block;height: 40px;width: 40px;color: #ffffff;background-color: red; text-align: center;font-size: 26px;;}
.sample1{display: inline-block;height: 40px;width: 40px;color: #ffffff;background-color: orange;text-align: center;font-size: 26px;;}
.sample2{display: inline-block;height: 40px;width: 40px;color: #ffffff;background-color: blue;text-align: center;font-size: 26px;

 

解决方案二: 将html元素写紧凑(消除空格)

核心 html 代码

<div class="sample0">0</div><div class="sample1">1</div><div class="sample2">2</div>
开始做,坚持做,重复做
相关文章
|
4天前
|
前端开发
去除 inline-block 元素间间距的方法
去除 inline-block 元素间间距的方法
|
2月前
行内元素有哪些?块级元素有哪些?空(void)元素有哪些?inline与inline-block的区别
行内元素有哪些?块级元素有哪些?空(void)元素有哪些?inline与inline-block的区别
19 0
|
3月前
display:block小技巧
display:block小技巧
18 0
block、inline、inline-block的区别
block、inline、inline-block的区别
|
6月前
消除两个inline-block元素之间的间隔
消除两个inline-block元素之间的间隔
24 0
|
7月前
display: block 属性影响flex布局
display: block 属性影响flex布局
|
8月前
|
前端开发 容器
【前端】一文读懂display: inline-block
【前端】一文读懂display: inline-block
215 2
|
10月前
|
前端开发 容器
CSS: inline、block和inline-block的区别
CSS: inline、block和inline-block的区别
display:none到display:block失效问题及解决办法
display:none到display:block失效问题及解决办法
244 9
|
前端开发
【前端】display:inline-block中间的间隙
【前端】display:inline-block中间的间隙
73 0
【前端】display:inline-block中间的间隙