in-line 元素专题

在 HTML 和 CSS 中，in-line（行内）元素是网页布局的基础组成部分之一。它们不会独占一行，而是与其他行内元素在同一行内排列，非常适合用于文本级别的样式控制。

什么是 in-line 元素？

行内元素（inline elements）的特点包括：

• 不会自动换行，多个行内元素可在同一行显示；
• 宽度和高度由内容决定，不能直接设置宽高；
• 垂直方向的 margin 和 padding 可能不会如预期生效；
• 常用于包裹文本片段，如强调、链接、图片等。

常见的 in-line 元素

• <span>：通用行内容器
• <a>：超链接
• <strong> / <em>：加粗/斜体强调
• <img>：图像（虽然是替换元素，但默认为 inline）
• <input>、<button>：表单控件（部分为 inline-block）

in-line 与 block 的区别

块级元素（如 <div>、<p>）会独占一行，可设置宽高；而行内元素则紧凑排列，适合嵌入文本流中。可通过 CSS 的 display 属性互相转换，例如：

display: inline; 或 display: block;

实用建议

合理使用 in-line 元素有助于语义化和轻量级排版。若需对行内元素设置宽高或精确布局，可考虑使用 display: inline-block;。