15 lines
1.1 KiB
Plaintext
15 lines
1.1 KiB
Plaintext
---
|
|
title: '`inline` 和 `inline-block`之间有什么区别？'
|
|
---
|
|
|
|
为了完整起见，让我们也与`display: block`进行比较。
|
|
|
|
| 属性 | `block` | `inline-block` | `inline` |
|
|
| --- | --- | --- | --- |
|
|
| 尺寸 | 填充其父容器的宽度。 | 取决于内容。 | 取决于内容。 |
|
|
| 位置 | 在新的一行开始，并且不允许旁边有任何 HTML 元素（除了当你添加`float`时）。 | 与其他内容一起排列，并允许旁边有其他元素。 | 与其他内容一起排列，允许其他元素在旁边。 |
|
|
| 可以指定 `width` 和 `height` | 是 | 是 | 否. 如果设置，将忽略。 |
|
|
| 可以用 `vertical-align` 对齐 | 否 | 是 | 是 |
|
|
| 外边距和内边距 | 各方面都会被遵循。 | 各方面都会被遵循。 | 只有水平方向受到遵循。 垂直方向（如果指定的话）不影响布局。 它所占用的垂直空间取决于 `line-height`，即使 `border` 和 `padding` 在视觉上出现在内容周围。 |
|
|
| 浮动 | - | - | 成为一个`block`元素，你可以在这里设置垂直外边距和内边距。 |
|