两个元素的display设置成inline-block会出现中间有间隔的问题

最新推荐文章于 2024-08-18 10:32:58 发布

赏花赏景赏时光

最新推荐文章于 2024-08-18 10:32:58 发布

阅读量3.8k

点赞数 3

分类专栏： css 文章标签：两个元素的display设置成inline-block会出现

本文链接：https://blog.csdn.net/tangxiujiang/article/details/80151334

版权

css 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

两个元素的display设置成inline-block会出现中间有间隔的问题，部分html如下

<div class="content-wrapper">
            <div class="avatar">
                <!--在标签中获取数据的时候，要在属性前面加上v-bind或者简写成':'-->
                <img width="64" height="64" :src="seller.avatar">
            </div>
            <div class="content">
              <div class="title">
                  <span class="brand"></span>
                  <span class="name">{{seller.name}}</span>
              </div>
              <div class="description">
                  {{seller.description}}/{{seller.deliveryTime}}分钟送达
              </div>
              <!--刚开始的时候，seller是一个空对象，seller.supports[0]为undefined，不解析这段HTML-->
              <!--如果不加上v-if，console会报错-->
              <div class="support" v-if="seller.supports">
                  <span class="icon"></span>
                  <span class="text">{{seller.supports[0].description}}</span>
              </div>
            </div>
</div>

css如下（用stylus语法书写）

.content-wrapper
      padding:24px 12px 18px 24px

      .avatar,.content
        display:inline-block

界面显示如下.avatar和.content之间有一个间隔

解决的方法是在父元素的样式上加上“font-size:0”

改写的部分的css如下所示

.content-wrapper
      padding:24px 12px 18px 24px
      font-size:0
      .avatar,.content
        display:inline-block

父元素加上font-size:0之后，界面的显示效果如下

此时.content中的文字不见了，这是因为子元素继承父元素的font-size:0，只要在.content中设置font-size:14px就ok了，修改后的部分css如下所示

.content-wrapper
      padding:24px 12px 18px 24px
      font-size:0
      .avatar,.content
        display:inline-block
      .content
        font-size:14px

修改之后，在浏览器中显示的效果如下