CSS中的行内元素与块级元素详解
在进行网页布局时，理解元素在文档流中的显示方式至关重要。CSS将HTML元素分为两大基本类型：块级元素和行内元素（也称内联元素）。此外，还有一类特殊的行内块元素（inline-block）。本文首先列举常见的行内元素，然后详细对比块级元素与行内元素的区别。
一、常见的行内元素
行内元素通常不会独占一行，它们只占据内容所需的宽度，且不能直接设置宽高（除非修改display属性）。以下是开发中经常使用的行内元素：
<span>——通用行内容器<a>——超链接<img>——图片（注意：<img>本质上是替换元素，行为类似行内块，但在标准中属于行内元素）<strong>——加粗强调<em>——斜体强调<b>——粗体（无语义）<i>——斜体（无语义）<u>——下划线<label>——表单标签<input>——输入框（替换元素，行为类似行内块）<textarea>——多行文本框（替换元素）<select>——下拉菜单（替换元素）<br>——换行<sub>、<sup>——上标/下标<code>——代码片段<cite>——引用<q>——短引用<abbr>——缩写<time>——时间
需要注意的是，<img>和<input>虽然是行内元素，但由于它们是替换元素（内容由外部资源或浏览器生成），它们可以设置宽度和高度，并且可以像行内块元素一样排版。不过，它们的默认display值仍是inline。
二、块级元素与行内元素的区别
我们可以从多个维度来对比它们的行为差异。下表总结了核心区别：
| 特性 | 块级元素 | 行内元素 |
|---|---|---|
| 独占一行 | 是，默认占据其父元素的整行宽度 | 否，与其他行内元素在同一行排列，直到空间不足才换行 |
| 宽度与高度 | 默认宽度为父元素的100%，高度由内容决定；可以设置width/height | 宽度和高度由内容决定，不能直接设置width/height（替换元素除外） |
| 内外边距（margin/padding） | 可以设置四个方向的margin和padding，且会影响布局 | 上下margin无效，左右margin有效；上下padding可设置但不会影响周围元素布局（可能溢出） |
| 包含关系 | 可以包含块级元素或行内元素 | 通常只能包含其他行内元素或文本，不能包含块级元素（<a>例外，HTML5中<a>可以包含块级元素） |
| 常见元素示例 | <div>、<p>、<h1>~<h6>、<ul>、<ol>、<li>、<table>、<form>等 | <span>、<a>、<strong>、<em>、<img>等 |
| 默认display值 | block | inline |
三、深入理解重点差异
1. 尺寸设置的限制
对于普通的行内元素（非替换元素），设置width和height是无效的。例如：
/* 下面的样式对行内元素 span 无效 */
span {
width: 200px;
height: 100px;
background-color: lightblue;
}浏览器会忽略宽高，背景色仍然只包裹文本内容。但如果将display改为inline-block或block，宽高就能生效。
2. 外边距的垂直方向
行内元素的上下外边距（margin-top/margin-bottom）在布局中不会产生任何间距，而左右外边距正常工作。垂直方向的内边距（padding）虽然会扩大元素的可点击区域和背景，但不会影响周围行内元素的位置，可能导致相邻元素重叠。
<!DOCTYPE html>
<html>
<head>
<title>示例</title>
<style>
.inline-box {
display: inline;
background: yellow;
margin: 20px 10px; /* 上下20px无效，左右10px有效 */
padding: 10px; /* 上下padding视觉上扩大，但不影响行高 */
}
.block-box {
display: block;
background: lightgreen;
margin: 20px 10px;
padding: 10px;
}
</style>
</head>
<body>
<span class="inline-box">行内元素</span>
<span class="inline-box">另一个行内元素</span>
<div class="block-box">块级元素</div>
<div class="block-box">另一个块级元素</div>
</body>
</html>3. 包含关系规则
块级元素可以包含任何类型的元素（块级或行内），但行内元素通常不能包含块级元素，否则会导致浏览器解析异常（例如将块级元素从行内元素中移出）。不过HTML5放宽了这项规则，允许<a>元素内部包含块级元素（如<div>），这在构建大块可点击区域时非常有用。
4. 垂直对齐
行内元素默认沿基线（baseline）对齐，而块级元素则占据整行。行内块元素（display: inline-block）兼具两者的特性：可以设置宽高，又不会独占一行，并且默认基线对齐。
/* 通过display: inline-block实现并排且可设置尺寸的盒子 */
.box {
display: inline-block;
width: 100px;
height: 80px;
background: coral;
margin: 5px;
vertical-align: top; /* 控制顶部对齐 */
}四、实际应用建议
在页面布局中，通常利用块级元素搭建整体骨架（如<div>划分区域），使用行内元素填充细节内容（如文字样式、小图标）。为了更灵活地控制排版，常常会将元素设置为display: inline-block，使其既能像行内元素一样水平排列，又能像块级元素一样设置尺寸和内外边距。
此外，通过重置display属性可以改变元素的默认行为，例如让<li>水平排列：li { display: inline; }，或者将<a>变为块级按钮：a { display: block; }。
五、总结
理解行内元素和块级元素的区别是CSS布局的基础。行内元素不独占一行、不可直接设宽高（替换元素除外）；块级元素独占一行、可设宽高。通过灵活运用display属性，可以组合出丰富的布局效果。建议在实际开发中使用浏览器的开发者工具查看元素的盒模型，加深对元素类型特性的理解。