【css】消除display: inline-block元素之间空隙的方法

水深无声 2024-02-19 13:57 5阅读 0赞

问题：

![20181129161335324.png][]

.goods-list{background-color: #f3fbfe;  padding: 10px 20px;}
    .good-msg span{display: inline-block;width: 10%;}
    .good-msg .p-name{width: 60%;}
    .good-msg .p-price{color: #e4393c;font-weight: bold;}
    .good-msg .p-delivery{text-align: right}

<div class="row goods-list">
        <p class="good-msg">
          
          <span class="p-name">商品名称11</span>
          <span class="p-price">￥4499.00</span>
          <span class="p-num">x1</span>
          <span class="p-state">有货</span>
          <span class="p-delivery">免邮</span>
        </p>
        <p class="good-msg">
          
          <span class="p-name">商品名称22</span><span class="p-price">￥49.00</span><span class="p-num">x1</span><span class="p-state">有货</span><span class="p-delivery">免邮</span>
        </p>
      </div>

原因：

#### inline-block**【特征】** ####

\[1\]不设置宽度时，内容撑开宽度

\[2\]非独占一行

\[3\]支持宽高

\[4\]代码换行被解析成空格

解决方法：

## 1、为inline-block元素添加样式float:left (推荐) ##

.good-msg span\{display: inline-block;width: 10%;float:left\}

## 2、删去元素之间的空白 ##

<span class="p-name">商品名称22</span><span class="p-price">￥49.00</span><span class="p-num">x1</span><span class="p-state">有货</span><span class="p-delivery">免邮</span>

\----------

<span class="p-name">  
商品名称22</span><span class="p-price">  
￥49.00</span><span class="p-num">  
x1</span><span class="p-state">  
有货</span><span class="p-delivery">  
免邮</span>

\----------

<span class="p-name">商品名称22</span><span  
class="p-price">￥49.00</span><span  
class="p-num">x1</span><span  
class="p-state">有货</span><span  
class="p-delivery">免邮</span>

参考：[inline-block元素之间的空隙的消除方法][inline-block]

[20181129161335324.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/fd3e8d1325b6406fb7927367860756d1.png
[inline-block]: https://blog.csdn.net/wu_xiaozhou/article/details/52924862

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关【css】消除display: inline-block元素之间空隙的方法

问题： ![20181129161335324.png][] .goods-list{background-color: f3fbfe; padding: 10p

水深无声/ 2024年02月19日 13:57/ 0 赞/ 6 阅读

相关图片与图片上下之间有空隙的解决方法

首先排除代码之间的换行符<br>，出现这个问题是因为图片为内联元素，有文字特性，默认存在间隙，所以会出现空白部分。可以将图片设置为block元素。 img{

拼搏现实的明天。/ 2022年12月30日 03:58/ 0 赞/ 132 阅读

相关 css 元素的显示与隐藏 display visibility

网页布局总结 1.标准流可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。 2.浮动可以让多个块级元素一行显示或者左右对齐，多个块级盒子水平

喜欢ヅ旅行/ 2022年12月27日 02:09/ 0 赞/ 278 阅读

相关 Android开发消除横向排列的多个Button之间的空隙

[Android开发消除横向排列的多个Button之间的空隙][Android_Button] 一.问题重述摘要里描述的可能不太清楚，问题如下图： ![291203

一时失言乱红尘/ 2022年08月10日 00:45/ 0 赞/ 175 阅读

相关 CSS-display、块级元素与内联元素

定义和用法： display属性规定元素应生成的框的类型。比较常用的值：完整详情：[http://www.w3school.com.cn/cssref/pr\_c

水深无声/ 2022年06月16日 14:54/ 0 赞/ 232 阅读

相关 CSS图片之间间隔消除办法

CSS两图片间隔消除办法今天在写CSS时发现，一个width为780px的容器并不能容纳两个width为390px的img元素，原因在于两图片之间存在间隔，那么该如何消

小灰灰/ 2022年06月05日 11:24/ 0 赞/ 189 阅读

相关解决相邻图片之间的空隙问题

一种方案： <div class="imgs"> <img src="imgs/1.jpg" id="img1"> <img src="img

╰半橙微兮°/ 2022年06月01日 10:41/ 0 赞/ 180 阅读

相关 html消除内联元素(、、)之间的空隙

html消除内联元素之间的空隙 -------------------- 使用内联元素，比如说span标签、a标签、img标签等。有时候会产生莫名的空隙。 ![这里

朱雀/ 2022年05月15日 06:42/ 0 赞/ 356 阅读

相关消除display设置为inline-block产生间距的方法

一、现象描述真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子： <input /> <input

矫情吗；*/ 2022年03月22日 10:20/ 0 赞/ 202 阅读

相关 CSS 技巧：display设置元素为行内元素时，元素之间存在间隙问题

在使用display将元素设置为行内元素的同时(例如：inline、inline-block等)，将margin全部设置为0，padding全部设置为0的时候，我发现了

待我称王封你为后i/ 2022年03月16日 02:30/ 0 赞/ 385 阅读