“设置display:block-inline的li或div中添加文字后，导致li或div排版掉落、错位”的原因及解决方法

先说我想实现的效果

然后我就很快的列出来了css

 .f_wornning{
        background: url("@/assets/images/icon_kaung.png")no-repeat 100% 100%;
        background-size: 100% 100%;
        margin: 10px 20px;
        height: 3rem;
        line-height: 3rem;
        color: #d8eebd;
        .f_wornning_icon{
          height: 2rem;
          width: 2rem;
          margin: 0.5rem;
          display: inline-block;
        }
      }

看一效果图（啊啊啊啊我想要的不是这个效果啊！！！！！）

解释一下为什么这样

我们需要了解CSS渲染机制：对于一个inline-block元素，如果内部没有inline内联元素，或者overflow不是visible，则该元素的基线就是它margin的底边缘，否则就是元素内部最后一行内联元素的基线。

即：

官方给出的解释：（笼统的想看就看不看可以拉到底直接看解决办法）

一个 div 元素在设置了 margin: 0.5rem; 和 display: inline-block; 后影响后面的内容错位，主要有以下几个原因：

1. display: inline-block; 的特性：
   inline-block 元素表现得既像 inline 元素又像 block 元素。它允许你在一行内放置多个元素，同时保持对元素宽高、边距（margin）、填充（padding）和边框（border）的控制，就像 block 元素一样。

2. 边距的叠加：
   当两个或多个 inline-block 元素垂直相邻时，它们的边距可能会发生叠加。这意味着实际的外边距可能会小于你设置的 0.5rem。这是 CSS 的一个特性，旨在防止连续的元素边距相加导致的过大间距。

3. 父元素或相邻元素的样式：
   如果父元素或相邻元素有特定的样式（比如 text-align、white-space、font-size 等），这些也可能影响 inline-block 元素及其周围内容的布局。

4. 行内元素的布局：
   inline-block 元素和其他 inline 或 inline-* 元素一样，会受到文本流和行高的影响。如果行高与你的 div 元素的高度或边距不匹配，可能会导致内容看起来错位。

5. 空白字符：
   在 HTML 代码中，inline-block 元素之间的空白字符（包括空格、换行和制表符）会导致它们之间出现额外的间距。这是因为这些空白字符在行内布局中会被视为实际的字符间距。

为了解决这个问题，你可以尝试以下方法：

• 确保父元素或相邻元素的样式不会导致布局问题。
• 使用 CSS 的 font-size: 0; 在父元素上消除空白字符造成的间距，然后再在 inline-block 元素上重置 font-size。
• 确保 margin、padding 和 border 的设置不会导致元素间的间距问题。
• 如果需要，使用 CSS 的 vertical-align 属性来调整 inline-block 元素的垂直对齐方式。

解决办法

放弃display选择float，我不太推荐，因为脱离文档流后页面元素会不好控制
直接给简单粗暴地给所有元素都加上内容，例如空格符，好控制。
设置所有内联元素 vertical-align: top/middle/bottom; 属性，改变默认设置（我选择这个方案）

【ps:

设置float和display-inline的不同

float是一种脱离文档流的浮动，所以会对下面元素的布局产生影响

inline-block不会影响文档柳，所以不会影响下面的元素的布局

】

我的效果（完美）