内联元素默认同行排列且仅占内容空间，无法直接设置宽高和上下外边距，因其设计目的是融入文本流；若需控制尺寸或布局，可通过CSS的display属性改为block或inline-block；常见内联标签如<span>、<a>、<img>等，各自承担不同语义功能；块级元素独占一行、可设宽高和完整外边距，可包含内联和其他块级元素，而内联元素通常只能包含文本或内联内容；inline-block结合两者优势，适用于需并排显示且可控制尺寸的场景，如导航菜单、图片画廊和表单对齐，是传统布局的重要工具，尽管现代布局多用Flexbox和Grid，但inline-block仍具实用价值。
HTML中内联元素默认就是内联的，你不需要额外设置。它们会自然地在同一行内排列，只占据其内容所需的空间。如果你想改变它们的显示行为，比如让它们像块级元素一样可以设置宽度和高度，或者让它们既能同行显示又能控制尺寸，那就需要用到CSS的
display属性。常见的内联标签有很多，比如
<span>、
<a>、
<em>、
<strong>、
<img>等等。
解决方案
说实话，刚开始学HTML的时候，我总觉得这些“内联”、“块级”的概念有点抽象。但用多了才明白，它们其实就是元素在页面上“站位”和“表现”的方式。
内联元素天生就是“排排坐”的。它们不会独占一行，而是紧跟在前面的内容后面，直到遇到行尾才换行。它们的宽度和高度通常由内容本身决定，你直接给它们设置
width或
height属性，多数情况下是无效的。
如果你想让一个内联元素拥有块级元素的特性，比如可以设置明确的宽度、高度，并且能够使用上下外边距（
margin-top/
margin-bottom）来推开其他元素，那么最直接的办法就是用CSS把它变成块级元素：
立即学习“前端免费学习笔记（深入）”；
span {
display: block; /* 这样<span>就变成了块级元素 */
width: 100px;
height: 50px;
margin-top: 10px;
}但更多时候，我们可能希望它们既能并排显示，又能像块级元素一样控制尺寸。这时，
display: inline-block;就是个非常棒的选择，它结合了两者的优点：
a {
display: inline-block; /* <a>会并排显示，但可以设置尺寸 */
width: 80px;
height: 30px;
padding: 5px 10px;
margin: 5px;
border: 1px solid #ccc;
}至于常见的内联标签，它们真的很多，而且各有各的用途：
<span>
: 最通用的内联容器，没有特定语义，常用于局部样式修改。<a>
: 超链接，用于跳转到其他页面或同一页面的不同位置。<em>
: 强调内容，通常显示为斜体。<strong>
: 更强的强调，通常显示为粗体。<i>
: 斜体，通常用于图标字体或技术术语。<b>
: 粗体，通常用于引起注意，无强调语义。<br>
: 换行符，强制文本换行。<img>
: 嵌入图片。<input>
: 表单输入控件。<label>
: 表单控件的标签。<select>
: 下拉列表。<textarea>
: 多行文本输入区域。<button>
: 可点击的按钮。<code>
: 显示计算机代码片段。<q>
: 短引用。<cite>
: 作品标题。
这些元素在HTML结构中扮演着不同的角色，但它们默认的“内联”属性，让它们在文本流中自然地融合。
内联元素为什么不能设置宽度和高度？
这个问题其实挺核心的，也是初学者经常感到困惑的地方。简单来说，内联元素之所以不能直接设置宽度和高度，是因为它们的设计哲学就是“跟随内容，融入文本流”。它们的主要任务是承载文本或少量内联内容，并与周围的文本保持一致的行高。
你可以想象一下，如果一个单词（比如一个
<span>包裹的单词）可以被你随意设置成500px宽、200px高，那它就会突然把整段文字的布局都破坏掉，甚至会覆盖到旁边的文字，这显然不是我们希望看到的。内联元素只占用它内容本身所需要的空间，水平方向上会根据内容自动扩展或收缩，垂直方向上则与行高保持一致。它们不会独立地占据一块矩形区域。
这也就解释了为什么你给
<span>设置
margin-top或
margin-bottom通常也看不到明显的布局变化，因为它们不影响垂直方向上的空间分配。它们能接受水平方向的
padding和
margin，但这些也仅仅是在元素内容周围增加一点间距，不会改变其根本的“行内”属性。
所以，当你真的需要控制内联元素的尺寸时，就意味着你希望它脱离这种“文本流”的限制，这时就必须改变它的
display属性，让它获得块级或内联块级元素的特性。这并非是HTML的“缺陷”，而是一种明确的设计选择，确保了文本排版的稳定性和可预测性。
内联元素和块级元素的主要区别是什么？
要理解HTML布局，区分内联元素和块级元素是基础中的基础，也是我个人觉得最能帮助你构建页面骨架的概念。它们最根本的区别体现在以下几个方面：
-
空间占用方式：
-
块级元素： 霸道总裁型。它们总是独占一行，无论内容多少，都会尽可能占据父容器的整个宽度。即使内容很短，它也会在后面自动换行。例如：
<div>
、<p>
、<h1>
。 -
内联元素： 谦逊随和型。它们只占据自身内容所需的空间，不会强制换行，可以和其他内联元素并排显示在同一行。例如：
<span>
、<a>
、<strong>
。
-
块级元素： 霸道总裁型。它们总是独占一行，无论内容多少，都会尽可能占据父容器的整个宽度。即使内容很短，它也会在后面自动换行。例如：
-
尺寸控制：
-
块级元素： 可以自由设置
width
、height
、margin
和padding
（上下左右都有效）。 -
内联元素： 无法直接设置
width
和height
（它们由内容决定），margin-top
和margin-bottom
通常无效（或效果不明显），但margin-left
、margin-right
、padding-left
、padding-right
是有效的。padding-top
和padding-bottom
会增加元素的可点击区域，但不会影响周围元素的垂直布局。
-
块级元素： 可以自由设置
-
内容包含：
-
块级元素： 通常可以包含块级元素和内联元素。比如
<div>
里面可以放<p>
、<span>
等。 -
内联元素： 通常只能包含文本或其他内联元素。例如，你不能把一个
<div>
放在<a>
里面。当然，也有少数例外，比如<a>
里面可以包含块级元素（HTML5允许，但要谨慎使用，因为它可能导致一些语义和可访问性问题）。
-
块级元素： 通常可以包含块级元素和内联元素。比如
-
默认行为：
- 块级元素在浏览器渲染时，会在其前后自动添加换行。
- 内联元素则不会。
理解这些差异，就像是掌握了两种不同形状的积木，你才能更好地规划和搭建你的网页布局。
什么时候应该使用内联块元素 (inline-block)？
inline-block是一个非常实用的CSS
display值，它巧妙地结合了内联元素和块级元素的优点，解决了许多布局上的痛点。我个人觉得，在Flexbox和Grid布局普及之前，
inline-block简直是前端开发者的“救星”之一，即便现在，它在某些场景下依然非常方便。
你通常会在以下情况考虑使用
inline-block：
-
需要元素并排显示，同时又能控制其尺寸和垂直外边距时： 这是
inline-block
最经典的用例。比如，你想要制作一个水平导航菜单，每个菜单项（<a>
标签）需要有固定的宽度和高度，并且可以设置上下边距来控制间距。如果用纯内联元素，就无法设置尺寸；如果用纯块级元素，它们会垂直堆叠。inline-block
完美解决了这个问题：<nav> <a href="#">首页</a> <a href="#">产品</a> <a href="#">服务</a> <a href="#">联系我们</a> </nav> <style> nav a { display: inline-block; /* 让链接并排显示，且可设置尺寸 */ width: 100px; height: 40px; line-height: 40px; /* 垂直居中文本 */ text-align: center; margin: 0 5px; /* 设置左右间距 */ background-color: #f0f0f0; border: 1px solid #ccc; } </style> 图片画廊或卡片布局： 当你想让一组图片或内容卡片并排显示，并且每张图片或卡片都有统一的尺寸和间距时，
inline-block
非常适用。它比浮动（float
）更易于管理垂直对齐，也避免了浮动清除（clear
）的麻烦。表单元素对齐： 在设计复杂的表单时，你可能需要将标签（
<label>
)和输入框（<input>
)放在同一行，并且希望它们能精确对齐或有固定的宽度。将它们设置为inline-block
可以很好地实现这种布局。需要实现“文本环绕”效果的自定义元素： 虽然不常见，但如果你有一个自定义的、带有背景或边框的小组件，希望它能像图片一样被文本环绕，同时又能控制其内部布局，
inline-block
也能派上用场。
总的来说，当你发现一个元素既需要“同行显示”的灵活，又需要“尺寸控制”的精确时，
inline-block往往是那个恰到好处的解决方案。当然，在现代CSS中，Flexbox和Grid提供了更强大和灵活的布局能力，但
inline-block作为一种简单直观的布局工具，仍然有其不可替代的价值。
