display: inline 元素忽略 width、height 及垂直方向的 margin，若需设置固定宽高并保持水平排列，应改用 display: inline-block。

`display: inline` 元素忽略 `width`、`height` 及垂直方向的 `margin`，若需设置固定宽高并保持水平排列，应改用 `display: inline-block`。

在 CSS 布局中，display: inline 是专为文本级元素（如 、）设计的显示模式——它让元素像文字一样流式排列，不独占一行，但完全无视 width、height、margin-top/margin-bottom 等块级属性。这正是你代码中

设置 width: 100px 却毫无效果的根本原因：div 默认是块级元素，一旦显式设为 display: inline，它就“放弃”了尺寸控制权。

✅ 正确解法是使用 display: inline-block：
它兼具两者的优点——保持行内排列（不换行、可与其他内联元素共处一行），同时支持宽高、内外边距等完整盒模型属性。

以下是修正后的代码示例：

inline-block