不可以直接给内联元素设置宽度和高度。原因在于内联元素的特性：
- 内联元素的排列方式: 内联元素水平排列，像文本一样，它们会自动适应包含它们的行框的宽度，并且只占据它们内容所需的宽度。
display属性的限制: 内联元素的display属性默认值为inline。在这种情况下，width和height属性会被忽略。浏览器渲染引擎不会根据你设置的宽高来渲染内联元素。
如何让内联元素具有宽高？
你需要改变元素的 display 属性，使其不再是内联元素。常用的方法有：
-
display: block;: 将元素转换为块级元素。块级元素会占据整行，并且可以设置宽度和高度。 -
display: inline-block;: 将元素转换为内联块级元素。这是一种既可以像内联元素一样水平排列，又可以设置宽度和高度的折衷方案。 -
display: flex;或display: inline-flex;: 使用 Flexbox 布局。将父元素设置为display: flex;或display: inline-flex;，然后就可以为子元素（即使是原本的内联元素）设置宽度和高度了。inline-flex会像内联元素一样排列，但内部采用 flex 布局。
示例：
假设你有一个 <span> 元素：
<span>这是一段文字</span>
你设置 width 和 height 是无效的：
span {width: 200px;height: 50px; /* 无效 */
}
你需要修改 display 属性：
span {display: block; /* 或 inline-block, flex, inline-flex */width: 200px;height: 50px; /* 现在有效 */
}
总结:
内联元素本身的特性决定了它无法直接设置宽度和高度。要实现对内联元素宽高的控制，你需要改变它的 display 属性，使其表现为块级元素或内联块级元素，或者使用 Flexbox 布局。
