内联元素默认同行排列且仅占内容空间，无法直接设置宽高和上下外边距，因其设计目的是融入文本流；若需控制尺寸或布局，可通过CSS的display属性改为block或inline-block；常见内联标签如、、等，各自承担不同语义功能；块级元素独占一行、可设宽高和完整外边距，可包含内联和其他块级元素，而内联元素通常只能包含文本或内联内容；inline-block结合两者优势，适用于需并排显示且可控制尺寸的场景，如导航菜单、图片画廊和表单对齐，是传统布局的重要工具，尽管现代布局多用Flexbox和Grid，但inline-block仍具实用价值。
HTML中内联元素默认就是内联的，你不需要额外设置。它们会自然地在同一行内排列，只占据其内容所需的空间。如果你想改变它们的显示行为，比如让它们像块级元素一样可以设置宽度和高度，或者让它们既能同行显示又能控制尺寸，那就需要用到CSS的
display
属性。常见的内联标签有很多，比如
、
、
、
、
@@##@@
等等。
解决方案
说实话，刚开始学HTML的时候，我总觉得这些“内联”、“块级”的概念有点抽象。但用多了才明白，它们其实就是元素在页面上“站位”和“表现”的方式。
内联元素天生就是“排排坐”的。它们不会独占一行，而是紧跟在前面的内容后面，直到遇到行尾才换行。它们的宽度和高度通常由内容本身决定，你直接给它们设置
width
或
height
属性，多数情况下是无效的。
如果你想让一个内联元素拥有块级元素的特性，比如可以设置明确的宽度、高度，并且能够使用上下外边距（
margin-top
/
margin-bottom
）来推开其他元素，那么最直接的办法就是用CSS把它变成块级元素：
立即学习“前端免费学习笔记（深入）”；
span { display: block; /* 这样就变成了块级元素 */ width: 100px; height: 50px; margin-top: 10px;}
但更多时候，我们可能希望它们既能并排显示，又能像块级元素一样控制尺寸。这时，
display: inline-block;
就是个非常棒的选择，它结合了两者的优点：
a { display: inline-block; /* 会并排显示，但可以设置尺寸 */ width: 80px; height: 30px; padding: 5px 10px; margin: 5px; border: 1px solid #ccc;}
至于常见的内联标签，它们真的很多，而且各有各的用途：
: 最通用的内联容器，没有特定语义，常用于局部样式修改。
: 超链接，用于跳转到其他页面或同一页面的不同位置。
: 强调内容，通常显示为斜体。
: 更强的强调，通常显示为粗体。
: 斜体，通常用于图标字体或技术术语。
: 粗体，通常用于引起注意，无强调语义。
: 换行符，强制文本换行。
@@##@@
: 嵌入图片。
: 表单输入控件。
: 表单控件的标签。
: 下拉列表。