如何在FontAwesome图标与<p>元素间加间距并实现二者同行显示

• <p> 是块级元素，默认样式为 display: block，会独占整行宽度，所以放在行内元素 <i> 后面自然会换行显示。
• HTML 规范不允许 <p> 标签互相嵌套，你代码中外部 <p id="first-info"> 内部又嵌套了两个用于修改颜色的 <p> 标签，浏览器解析时会自动把嵌套的 <p> 拆分为独立的块级元素，会进一步导致内容分段换行。

方案1（更推荐，符合HTML规范） #

把所有 <p> 标签替换为默认行内显示的 <span> 标签，图标和文字默认就会在同一行，直接在图标后加空格或者给图标加右外边距即可控制间距：

<!-- 直接加空格控制间距 -->
<i class="fas fa-exclamation-circle"></i> <span id="first-info">Only <span style="color: greenyellow;">Admin</span> is allowed full priviledges whereas <span style="color: red;">User</span> is allowed partial priviledges.</span>

<!-- 用CSS margin控制间距更灵活 -->
<i class="fas fa-exclamation-circle" style="margin-right: 8px"></i><span id="first-info">Only <span style="color: greenyellow;">Admin</span> is allowed full priviledges whereas <span style="color: red;">User</span> is allowed partial priviledges.</span>

方案2（保留原有p标签结构） #

给所有p标签修改display属性为行内或者行内块，强制不换行：

<style>
/* 统一修改p的显示属性为行内 */
#first-info, #first-info > p {
  display: inline;
}
/* 控制图标和文字间距 */
.fa-exclamation-circle {
  margin-right: 8px;
}
</style>

<i class="fas fa-exclamation-circle"></i><p id="first-info">Only <p style="color: greenyellow;">Admin</p> is allowed full priviledges whereas <p style="color: red;">User</p> is allowed partial priviledges.</p>

内容的提问来源于stack exchange，提问作者user16765028