display: inline-block有白边

display: inline-block是CSS中的一个属性，它可以将元素为内联块级元素。当使用display: inline-block时，元素会像内联元素一样排列在一行上，但是可以设置宽度、高度和边距等属性。

关于display: inline-block有白边的问题，通常是由于元素之间的空白字符（空格、换行符等）导致的。由于inline-block元素会将空白字符也作为内容的一部分进行渲染，所以会出现白边的情况。

解决这个问题的方法有两种：
1. 去除空白字符：可以通过在HTML代码中去除元素之间的空白字符，或者使用注释来占位，从而避免出现白边。
2. 设置父元素的font-size: 0属性：可以通过设置父元素的字体大小为0，来消除空白字符的影响。然后再在子元素中重新设置合适的字体大小。

相关问题

display:inline-block 中间有空隙怎么解决

`display: inline-block;` 属性通常用于创建行内块级元素，但是当两个元素之间有空白字符（如空格、换行符等）、浮动元素或者存在默认边距和填充时，可能会出现间距。要解决这个问题，你可以采取以下几种方法：

1. **消除空白**：删除直接相邻元素之间的空格、制表符或换行符。可以使用 ` `（非 Breaking Space）代替空格。

<div style="display: inline-block;">元素A</div><div style="display: inline-block;">元素B</div>

改为：

<div style="display: inline-block;">元素A</div>&nbsp;<div style="display: inline-block;">元素B</div>

2. **设置`font-size: 0`**：对于包含文本的元素，将它们的 `font-size` 设置为0，可以去除文本间的默认空白。

<style>
.container {
  font-size: 0;
}
</style>

<div class="container">
  <div style="display: inline-block;">元素A</div>
  <div style="display: inline-block;">元素B</div>
</div>

3. **负边距**：对其中一个或两个元素应用负 `margin` 来抵消间隙，注意要控制好值，以免影响其他布局。

4. **清除浮动**：如果是因为浮动元素导致的间隙，可以在最后一个 `inline-block` 元素之后添加一个清除浮动的 `clearfix` 类。

5. **CSS Flexbox 或 Grid**：如果你的项目兼容，可以考虑使用 Flexbox 或 Grid 布局，它们能更好地控制元素间的间距。

display: inline-block居右

`display: inline-block;` 是CSS的一个属性值，它用于将元素设置为内联块级元素，并允许元素与其他行内元素在同一行上排列。当应用于一个元素时，它会占据其内容所占的空间，同时还可以设置宽度和对齐方式。若想让该元素在其容器中居右显示，可以结合其他属性，例如：

1. 将 `text-align: right;` 应用到包含它的父元素，使得整个文本行向右对齐。
2. 使用 `margin-left: auto;` 和一个确定的宽度值，这样元素会在左右两边留有相等的空白，使其自动靠右。

示例代码如下：

.parent {
  text-align: right;
}

.child {
  display: inline-block;
  width: 200px;
  margin-left: auto;
}

在这个例子中，`.child` 元素将会在其父元素 `.parent` 中从右向左对齐。