为什么行内块总是底部对齐

行内块元素（如`<img>`、`<a>`等）默认情况下会像文本一样水平基线对齐，即它们会与其包含行内的文字保持在同一基线上。这是因为它们本质上还是按照行内流（inline flow）处理的，而非块级元素那样占据独立的空间。

然而，如果你想让行内块元素垂直居底对齐，你可以通过CSS样式实现。最常见的做法是给它们添加一些负外边距(`margin-bottom`)，同时设置`display: inline-block`或`vertical-align: bottom`。另外，如果容器设置了`line-height`，也可以间接影响到行内块元素的垂直对齐。

例如：

.inline-bottom {
  display: inline-block;
  vertical-align: bottom; /* 或者 */
  margin-bottom: -webkit-line-box-contain; /* 适用于WebKit浏览器 */
  margin-bottom: -moz-box-sizing/bottom-border-box; /* Firefox兼容 */
}

相关问题

css 文字底部对齐顶部对齐居中对齐

CSS 中，文字的对齐主要有三种方式：

1. **文字底部对齐** (text-bottom): 这使得文本的底部与其包含元素的底部对齐。这通常用于标题或行内元素，如 `<p>` 元素，当内容较少且想让文本保持在容器下方时使用 `align-items: flex-end` 或 `vertical-align: bottom`。

2. **顶部对齐** (text-top): 文本的顶部与元素的顶部对齐，对于垂直方向，可以使用 `align-items: flex-start` 或 `vertical-align: top`。这种对齐方式常见于希望文本始终处于元素最上方的情况。

3. **居中对齐** (centering): 文字水平和垂直都居中。水平居中可以用 `text-align: center` 实现，而垂直居中可以通过设置 `line-height` 相当于元素高度并配合 `vertical-align: middle` 来达成，或者使用 Flexbox 或 Grid 的 `justify-content: center` 和 `align-items: center`。

CSS设置文字底部对齐

要设置文字的底部对齐，可以使用CSS的`vertical-align`属性。该属性可以应用于行内元素和表格单元格。以下是一些示例代码：

/* 使行内元素底部对齐 */
.inline-element {
  vertical-align: bottom;
}

/* 使表格单元格内的内容底部对齐 */
table td {
  vertical-align: bottom;
}

在上面的代码中，`.inline-element`是一个行内元素的选择器，`vertical-align: bottom`将该元素的底部与其父元素的底部对齐。`table td`选择所有表格单元格，`vertical-align: bottom`使表格单元格内的内容底部对齐。