它让一个元素 “既能和别人在同一行并排，又能设置宽高、大小”。
对比一看就懂
1. inline（行内元素）
能和别人在同一行
不能设置宽高
与之相同的有：<span> <a> <b>
2. block（块级元素）
独占一行，不和别人并排
能设置宽高
与之相同的有：<div> <p> <h1>
3. inline-block（行内块元素）
✅ 可以和别人在同一行显示
✅ 可以设置宽度、高度、内边距、margin
✅ 不会自动独占一行
假如你之前的标题会和其它文字同处一行？
是因为你用了：
display: inline-block;
它的特性就是：不换行、能并排！
所以标题会跟前面的文字、后面的文字挤在同一行。
你现在需要的是：
标题必须独占一行，不与任何文字同行
所以要改成：
display: block;
display: block; 的意思
总之，
inline-block = 不换行、可并排
block = 自动换行、独占一行
如果你想让标题不和其它文字挤在一起，要么用 display: block; 要么不写（因为这种块级元素默认独占一行、自动换行），示例如下：
.article-content h5 {
display: block; /* 标题自己占一行 也可以去掉这部分 */
width: fit-content;
max-width: 100%;
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
box-sizing: border-box;
line-height: 1.5;
margin: 20px 0 12px;
padding: 8px 12px;
font-weight: 700;
border-radius: 4px;
}
除非特别注明，所有文章由找知识百科和信息网 www.zhaozhishi.com 原创，可转载，必须注明去处，否则可能追究侵权责任。