行内块状元素
HTML元素有三种显示方式：块级元素、行级元素、行内块状元素。这里介绍一下行内块状元素。
1. 定义
行内块状元素是介于行内元素和块级元素之间的一种元素，它既可以设置宽高，又可以同时容纳其他元素。行内块状元素中，元素间换行会产生空白间距，需要使用CSS消除。
2. 常见的行内块状元素
以下是常见的几种行内块状元素。
2.1 图片
<img src="图片地址" alt="图片描述" width="宽度" height="高度">img标签是不需要闭合的，它可以显示一个图片。其中，src属性表示图片的地址，alt属性表示图片的描述（当图片无法加载时会显示描述），width和height属性可选，表示图片的宽度和高度。
2.2 表单元素
input：用于输入表单信息。
button：用于触发某些动作。
textarea：用于多行文本输入。
select：用于下拉列表选择。
2.3 其他
a：用于链接。
span：用于单独设置某些文字样式，或与CSS配合使用。
i、em、del、ins、strong等行内样式标签。
3. 使用行内块状元素的场景
行内块状元素通常用于一些需要设置宽高，但是不希望独占一行，而是希望与其他元素在同一行上的情况。
3.1 图片墙
比如常见的图片墙，每个图片都是一张图片和一段描述文字的组合，使用行内块状元素可以使图片与描述文字横向排列。
<div class="picture-wall">
<div class="picture-item">
<img src="图片1地址" alt="图片1描述">
<p>图片1描述文字</p>
</div>
<div class="picture-item">
<img src="图片2地址" alt="图片2描述">
<p>图片2描述文字</p>
</div>
<!-- more picture-item elements -->
</div>
接下来通过CSS样式进行调整，即可实现如下效果。
.picture-wall {
/* 设置容器宽度，可以自定义 */
width: 600px;
}
.picture-item {
/* 设置元素样式 */
display: inline-block;
margin: 10px;
width: 200px;
border: 1px solid #ccc;
}
.picture-item img {
/* 设置图片样式 */
width: 100%;
height: auto;
}
.picture-item p {
/* 设置描述文字样式 */
margin: 0;
padding: 5px;
}
通过设置.display: inline-block，使每个picture-item元素都以行内块状元素的方式展示，可以实现图片墙的效果。
3.2 插入图标
另外一个常见的场景就是插入图标。例如我们想在标题前面加入一个info提示的图标，就可以使用行内块状元素。具体实现方式为：在标题前面插入一个空的span元素，设置宽高后再使用CSS设置背景图片。
<h2>
<span class="icon-info"></span>
标题
</h2>
.icon-info {
display: inline-block;
width: 20px;
height: 20px;
background-image: url(图标地址);
}
4. 总结
如上所述，行内块状元素是一种介于行内元素和块级元素之间的元素，通常用于一些需要设置宽高，不希望独占一行的场景。常见的行内块状元素有图片、表单元素、a标签等。使用行内块状元素时，需要根据具体情况进行样式调整，去除生成的空白间距等（这部分可以使用CSS解决）。