在css布局过程中，我们经常会遇到给某些元素设置width和height属性后没有效果的情况，这类问题大多出现在行内元素上。行内元素是css中元素显示类型的一种，它的默认行为决定了其宽高无法被直接修改。
行内元素无法设置宽高的原因
css中的元素按照显示类型可以分为行内元素、块级元素和行内块级元素三大类，不同类型的元素有不同的默认布局规则：
- 块级元素：默认独占一行，宽度默认是父容器的100%，高度由内容决定，支持手动设置width和height属性。
- 行内元素：默认和其他行内元素排列在同一行，宽度和高度完全由自身的内容决定，浏览器会忽略手动设置的width和height属性。
- 行内块级元素：同时具备行内元素和块级元素的部分特性，可以和其他行内元素排列在同一行，同时也支持手动设置width和height属性。
常见的行内元素包括<span>、<a>、<em>、<strong>、<label>等，这些元素默认都不支持宽高设置。我们可以通过下面的示例来验证这个特性：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>行内元素宽高测试</title>
<style>
.inline-box {
width: 200px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<span class="inline-box">我是行内span元素</span>
<div class="inline-box">我是块级div元素</div>
</body>
</html>
运行上面的代码可以看到，span元素虽然设置了200px宽度和100px高度，但实际显示的尺寸完全由文字内容决定，而div元素则正常应用了设置的宽高，这就是行内元素的默认特性导致的。
用display属性转换元素类型解决宽高问题
display是css中用来控制元素显示类型的核心属性，我们可以通过修改这个属性的值，将行内元素转换为支持宽高设置的类型，常用的值有以下两种：
1. display: block 转换为块级元素
将行内元素的display属性设置为block，元素就会变成块级元素，此时会独占一行，同时支持width和height属性设置。示例代码如下：
/* 将行内span元素转换为块级元素 */
span {
display: block;
width: 200px;
height: 100px;
background-color: #e6f7ff;
border: 1px solid #91d5ff;
}
转换后span元素会独占一行，并且宽高会按照设置的值生效，不过这种方式会改变元素的排列特性，原本和其他行内元素同行排列的效果会消失。
2. display: inline-block 转换为行内块级元素
如果希望元素既保持和其他行内元素同行排列的特性，又支持宽高设置，就可以将display属性设置为inline-block，这是实际开发中最常用的解决方案。示例代码如下：
/* 将行内span元素转换为行内块级元素 */
span {
display: inline-block;
width: 200px;
height: 100px;
background-color: #f6ffed;
border: 1px solid #b7eb8f;
}
转换后span元素可以和其他行内元素排列在同一行，同时设置的200px宽度和100px高度都会正常生效，兼顾了布局灵活性和样式可控性。
不同display值的特性对比
为了更清晰地了解不同display值对元素宽高和排列的影响，我们可以通过下面的表格进行对比：
| display值 | 是否支持宽高设置 | 排列方式 | 默认宽度 |
|---|---|---|---|
| inline（默认行内） | 否 | 和其他行内元素同行排列 | 由内容决定 |
| block | 是 | 独占一行 | 父容器100% |
| inline-block | 是 | 和其他行内元素同行排列 | 由内容决定 |
注意事项
在使用display属性转换元素类型时，需要注意以下几点：
- 转换元素类型后，元素的其他默认特性也会发生变化，比如块级元素默认有上下边距，行内元素默认没有上下边距，转换后边距规则会跟随新的元素类型。
- 如果行内元素内部包含文本内容，设置行高line-height属性可以调整文本的垂直居中效果，这个属性对行内元素和行内块级元素都生效。
- 除了display属性，还可以使用float属性让行内元素支持宽高，但float会改变元素的文档流特性，一般更推荐使用display属性来解决宽高问题。
总结：css行内元素无法设置宽高是其默认特性导致的，通过display属性将行内元素转换为block或者inline-block类型，就可以让宽高设置生效，其中inline-block是兼顾排列和样式控制的最优选择。