在不可替换元素上使用width/height/margin/padding会有什么样的表现？

在不可替换元素（non-replaceable elements）上使用 width、height、margin 和 padding 的表现取决于元素的类型以及其默认的 display 属性值。

1. 行内元素 (inline elements) 例如 <span>, <a>, <em>, <strong> 等:

• width 和 height: 通常不起作用。行内元素的宽度和高度由其内容决定。你可以通过将其 display 属性设置为 inline-block 或 block 来使其支持 width 和 height。
• margin: 水平方向的 margin ( margin-left 和 margin-right ) 会生效，但垂直方向的 margin ( margin-top 和 margin-bottom ) 通常不起作用。
• padding: 水平方向的 padding 会生效，并会推开周围的内容。垂直方向的 padding 也会生效，会增加元素的背景颜色/图像的区域，但不会推开周围的行框，可能会与其他行重叠。

2. 行内块级元素 (inline-block elements):

• width 和 height: 生效。你可以直接设置宽度和高度。
• margin 和 padding: 全部生效。

3. 块级元素 (block elements) 例如 <div>, <p>, <h1> - <h6>, <ul>, <li> 等:

• width 和 height: 生效。默认情况下，块级元素的宽度会占满其父容器的宽度，你可以设置具体的宽度值。高度则由内容决定，你也可以设置固定高度。
• margin 和 padding: 全部生效。

替换元素 (replaced elements) 例如 <img>, <input>, <textarea>, <iframe>, <video>, <object> 等:

替换元素是指其内容不由 CSS 控制，而是由外部资源（例如图像、视频等）决定的元素。 这些元素通常具有固有的尺寸。

总结:

为了更好地控制行内元素的尺寸和布局，通常的做法是将其 display 属性设置为 inline-block 或 block。 理解不同 display 属性值对 width、height、margin 和 padding 的影响至关重要。

希望以上解释能够解答你的疑问。