什么是 inline 元素?
在 HTML 中,inline(行内)元素不会独占一行,它们只占据内容所需的空间,并与其他行内元素在同一行内排列。
常见的 inline 元素包括:<span>、<a>、<strong>、<em>、<img>(替换元素)等。
inline 元素的特点
- 宽度和高度由内容决定,无法直接设置
width和height。 - 垂直方向的
margin和padding不会影响文档流(但视觉上可能可见)。 - 不能包含 block 级元素(HTML 规范限制)。
- 多个 inline 元素默认水平排列,受空格/换行影响会产生间隙。
inline 与 block 的对比
Block 元素(如 <div>、<p>)会独占一行,可设置宽高,垂直排列。
Inline 元素则“融入”文本流,适合对文字片段进行样式或语义标记。
<div> ← 这是 block 元素,会换行
<span>这是 inline 元素</span> 和 <span>另一个</span> → 它们在同一行
<span>这是 inline 元素</span> 和 <span>另一个</span> → 它们在同一行
实际演示:inline 元素效果
以下是一组典型的 inline 元素,注意它们如何自然排列:
这是一个 span
这是一个链接
加粗文本
斜体强调
常见误区与技巧
- 无法设置宽高? 可通过
display: inline-block转换为行内块元素。 - 元素间有空白? 可通过注释、字体大小归零或 Flex 布局消除间隙。
- 垂直居中? 对父容器使用
line-height等于高度,适用于单行文本。