在编写HTML页面时，每个标签其实都带有默认的显示类型，其中最常见的就是块级元素和行内元素。很多人以为只要把标签写对就能正常显示，但实际上如果不了解这两种类型的差异，页面布局很容易出现问题。比如你可能会发现给一个链接设置了宽度却毫无效果，或者两个div总是换行显示。这些现象的背后就是块级和行内元素的区别在起作用。
块级元素与行内元素的基本特征
首先，我们得搞清楚这两种元素各自有哪些默认表现，这样才能在需要时正确选择。
块级元素的特点
- 默认独占一行，前后都会自动换行
- 默认宽度为100%（占满父容器宽度）
- 可以设置width、height、margin、padding等盒模型属性
- 可以容纳其他块级元素或行内元素
常见的块级元素包括：<div>、<p>、<h1>~<h6>、<ul>、<li>、<table>、<section>、<header>、<footer>等。
行内元素的特点
- 不会独占一行，多个行内元素可以在一行内并排显示
- 默认宽度由内容决定
- 设置width、height无效（除非改变显示类型）
- 只能设置水平方向的margin和padding（上下方向的margin和padding虽然生效但不会影响周围元素，可能产生重叠）
- 通常只能容纳文本或其他行内元素，不能直接包含块级元素（HTML5中放宽了部分规则，但依然不建议）
常见的行内元素包括：<a>、<span>、<strong>、<em>、<img>、<input>、<label>、<code>等。
如何根据需求选择
知道了两者的基本区别，接下来便是核心问题：在写HTML时到底该用块级还是行内？这取决于你需要元素具备怎样的布局行为。
需要占据一整行或控制宽高时用块级元素
当你要创建一个独立的区域，比如一个卡片、一个导航栏、一个段落，通常应该使用块级元素。因为块级元素会自动换行，方便你单独控制它的背景、边框、尺寸等。例如，一个文章列表中的每一项都可以用<div>或<li>（默认块级）来包裹。
需要元素并排显示且只包裹内容时用行内元素
如果只是希望强调一段文字中的几个词，或者让几个链接水平排列，行内元素是最好的选择。因为它们不会换行，且只占据必要空间，非常适合用在文本流中。例如，给一段文字中的某个关键词加上<strong>或者给电话号码加上<a href="tel:xxx">。
需要同时具备块级和行内特性时使用CSS改变显示类型
有时候默认的类型无法满足需求。比如你想要一个<a>标签能设置宽高但又不独占一行（就像按钮一样），或者你希望<div>能并排显示。这时就需要用display属性来调整：
display: block;让任何元素表现为块级元素display: inline;让任何元素表现为行内元素display: inline-block;让元素既有行内元素的并排特性，又能设置宽高和上下外边距，非常实用
实际开发中，inline-block使用频率很高，例如制作水平导航菜单、栅格布局等。不过需要留意，inline-block元素之间会有默认的空白间隙（因为HTML中的换行符被解析为空格），可以通过父容器font-size: 0;或使用Flexbox来解决。
实际场景示例
下面通过几个经典案例来演示如何根据需求正确选择。
场景一：制作水平导航菜单
导航菜单中的每个项目通常需要设置背景色、内边距、模拟按钮样式，且它们需要水平排列。最简单的做法是用<ul>加上<li>，再将<li>设置为display: inline-block;或display: inline;（但inline不能设置宽高，所以用inline-block更灵活）。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>水平导航菜单</title>
<style>
.nav-list {
list-style: none;
padding: 0;
margin: 0;
background: #f5f5f5;
}
.nav-list li {
display: inline-block;
margin-right: 10px;
}
.nav-list a {
display: block;
padding: 10px 20px;
background: #333;
color: white;
text-decoration: none;
}
.nav-list a:hover {
background: #555;
}
</style>
</head>
<body>
<ul class="nav-list">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</body>
</html>在这个例子中，<li>默认是块级元素（独占一行），但我们通过display: inline-block;改变了它，让它既能水平排列又可以设置内边距。内部的<a>又设为display: block;，使整个区域都可点击，且能控制尺寸。
场景二：文本中突出显示部分内容
如果你的需求只是在句子中让某些词变色或加粗，且不需要它们换行、不需要设置宽高，那么直接使用行内元素是最省事的。
<p>今天的天气<strong>非常不错</strong>，适合去<span style="color: red;">户外运动</span>。</p>
这里<strong>和<span>都是行内元素，它们会一直在同一行文本流中，不会破坏段落结构。
场景三：制作卡片网格
当需要制作一排卡片，每张卡片有固定宽度且并排显示，但超出容器宽度时自动换行（类似于flex-wrap的效果）。虽然现在更推荐用Flexbox或Grid，但老项目可能会用inline-block来模拟。
<div class="card-container">
<div class="card">卡片1</div>
<div class="card">卡片2</div>
<div class="card">卡片3</div>
<div class="card">卡片4</div>
</div>
<style>
.card-container {
width: 100%;
font-size: 0; /* 消除inline-block间隙 */
}
.card {
display: inline-block;
width: 200px;
height: 150px;
background: #e0e0e0;
margin: 10px;
font-size: 16px; /* 在卡片内恢复字体大小 */
vertical-align: top;
}
</style>这里每个<div>本身是块级元素，但通过display: inline-block变成行内块，从而可以水平排列。注意父容器设置font-size: 0来消除空白间隙，子元素再恢复字体大小。
常见误区与注意事项
在实际开发中，一些新手容易犯以下错误，需要特别留意。
- 直接给行内元素设置宽高：比如
<span style="width:100px; height:50px;">文字</span>，这样做没有任何效果，必须把display改为block或inline-block才行。 - 在行内元素中嵌套块级元素：例如
<a href="#"><div>按钮</div></a>，虽然HTML5中允许<a>包含块级元素，但某些旧浏览器可能解析异常，且不符合规范直觉。如果实在需要，可以把<a>设为display: block。 - 忽略行内元素的上下margin无效性：行内元素的上下margin虽然可以设置，但不会影响周围元素（比如不会撑开父容器的高度），通常需要改用padding或改用inline-block。
- 滥用br标签换行：有些人习惯用多个
<br>实现换行，但更好的做法是将内容分成多个块级元素（如<p>）来控制间距。
总结
选择行内元素还是块级元素，关键在于你希望元素在页面中如何排列、是否要控制尺寸和间距。简单来说：如果内容需要独占一行并能自由设置宽高，就用块级元素或display: block；如果内容需要在一行内并排且只占用内容空间，就用行内元素；如果既要并排又能设置宽高，就用display: inline-block。结合语义化的HTML结构，再配合CSS灵活调整，你就能写出既符合规范又容易维护的页面布局。