内联元素默认同行排列且仅占内容空间，无法直接设置宽高和上下外边距，因其设计目的是融入文本流；若需控制尺寸或布局，可通过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;
}至于常见的内联标签，它们真的很多，而且各有各的用途：