inline元素即行内元素，是HTML元素分类中的一种，这类元素在文档流中不会独占一行，而是会和其他行内元素或者文本在同一行内排列，直到一行排满才会换行。常见的inline元素有<span>、<a>、<strong>、<em>、<code>等，它们的默认表现和行为都有明确的规范。
inline元素的核心特点
1. 排列特性
inline元素不会独占父容器的整行空间，多个inline元素会从左到右依次排列在同一行，只有当当前行的剩余空间不足以容纳下一个inline元素时，才会自动换行到下一行。如果一行内同时有inline元素和文本，它们会混合排列，文本会和inline元素在同一行内显示。
2. 尺寸设置限制
inline元素的宽度和高度无法通过CSS的width和height属性直接设置，其宽度默认由自身内容（比如文本、内部子元素）的宽度决定，高度默认由自身内容的高度决定。如果尝试给inline元素设置width和height，这些属性不会生效。
可以通过以下代码示例验证这个特点：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.inline-demo {
width: 200px; /* 该属性不会生效 */
height: 100px; /* 该属性不会生效 */
background-color: #f0f0f0;
border: 1px solid #ccc;
}
.block-demo {
width: 200px;
height: 100px;
background-color: #e0e0e0;
border: 1px solid #999;
}
</style>
</head>
<body>
<!-- 行内元素示例 -->
<span class="inline-demo">我是inline元素</span>
<span class="inline-demo">我也是inline元素</span>
<!-- 块级元素示例对比 -->
<div class="block-demo">我是块级元素</div>
</body>
</html>
3. 内外边距的表现
inline元素可以设置左右方向的内边距padding-left、padding-right和外边距margin-left、margin-right，这些属性会生效并且会影响元素和其他内容的间距。但是上下方向的内边距padding-top、padding-bottom和外边距margin-top、margin-bottom不会生效，不会影响到元素的垂直位置，也不会挤开其他行的元素。
验证边距表现的代码如下：
/* inline元素样式示例 */
.inline-margin-demo {
padding-left: 20px;
padding-right: 20px;
/* 上下内边距不会生效 */
padding-top: 30px;
padding-bottom: 30px;
margin-left: 15px;
margin-right: 15px;
/* 上下外边距不会生效 */
margin-top: 40px;
margin-bottom: 40px;
background-color: #f5f5f5;
}
4. 包含块级元素的限制
inline元素内部不能直接包含块级元素，如果在inline元素内部嵌套块级元素，浏览器解析时可能会自动修改DOM结构，导致不符合预期的表现。如果需要包裹块级元素，通常需要先把inline元素通过display属性转换为块级元素或者行内块元素。
inline元素和块级元素的对比
为了更清晰地理解inline元素的特点，我们可以把它和块级元素做对比，具体差异如下：
| 对比维度 | inline元素（行内元素） | 块级元素 |
|---|---|---|
| 排列特性 | 不独占一行，同行排列 | 独占一行，上下排列 |
| 尺寸设置 | width、height无效 | width、height有效 |
| 边距表现 | 仅左右边距生效 | 上下左右边距均生效 |
| 默认元素示例 | <span>、<a>、<strong> | <div>、<p>、<h1>-<h6> |
inline元素的常见使用场景
inline元素适合用于包裹小段文本或者行内内容，给特定文本添加样式或者语义。比如用<strong>包裹需要加粗强调的文本，用<a>作为行内的跳转链接，用<span>给局部文本添加特殊样式。如果需要对inline元素设置宽高或者上下边距，可以通过CSS的display属性将其修改为inline-block，这样既可以保持行内排列的特性，又能支持宽高和上下边距的设置。
将inline元素转换为inline-block的代码示例：
/* 将span转换为行内块元素 */
span {
display: inline-block;
width: 100px;
height: 50px;
margin-top: 20px;
background-color: #e8f4ff;
}