img图片之间的间隙、inline-block元素之间的间隙

CSS基础进阶 专栏收录该内容
20 篇文章 2 订阅

inline-block常见问题场景

  • img图片与图片之间会有莫名的空隙
  • 同一行的元素之间会有空隙

inline-block的诞生原因

在CSS中:

  • 块级对象元素会单独占一行显示,多个block元素会各自新起一行,并且可以设置width,height属性;
  • 内联对象元素前后不会产生换行,一系列inline元素都在一行内显示,直到行排满,对inline元素设置width,height属性无效。

因此:

  • 我们有个时候既希望元素具有宽度高度特性,又具有同行特性,这个时候我们可以使用inline-block
  • 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。

特征:

  • 既呈现 inline 特性(不占据一整行,宽度由内容宽度决定)
  • 又呈现 block 特性 (可设置宽高,内外边距)
  • 默认情况下,inline-block元素之间就有空隙出现

inline-block的排列方式有什么缺点

众所周知,越是强大的特性,限制也会越多,要不然岂不是逆天了?

示例一

style:

.box{
    width: 700px;
    height: 300px;
    background: rgba(0,0,0,0.1);
    margin: 0 auto;
    margin-top: 100px;
    padding: 20px;
}
.child{
    width: 100px;
    height: 100px;
    background: rgba(97, 139, 161,0.5);
    display: inline-block;
}

HTML:

<div class="box">
    <div class="child child-1"></div>
    <div class="child child-2"></div>
    <div class="child child-3"></div>
</div>

你会发现一行排列的div.child之间会有空隙,我并没有对div.child进行margin设置。
在这里插入图片描述

示例二

我将三个div.child替换成三张img,你会发现img之间也会有一条间隙(我没有对图片设置任何样式
在这里插入图片描述

问题产生的原因

产生的原因:就是标签之间的空格,这个可以上溯到SGML(标准通用标记语言)和TeX(排版工具),它实际上是一个行内(inline)的问题,它由空格、换行或回车所产生空白符所致
在这里插入图片描述

如何解决?

1. 改变代码书写方式。(不推荐且不美观)
2. 改变字符大小。(font-size: 0)
3. 改变元素间距。(margin-left: -“适当数值”px ,不推荐啊,不同的浏览器、项目都有可能导致基准字体大小不一样)
4. 不用inline-block布局即可,改为display:block后调试(手动狗头 ^ - ^)

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值