如何实现Font Awesome图标与右侧文本分隔两侧的均匀间距？

我明白你现在的困扰——想用一条边框把图标和文本清晰分开，同时让图标到边框的间距和边框到文本的间距始终保持相等，不管屏幕怎么缩放都不会乱。之前用space-evenly加固定百分比宽度的方式，因为依赖元素的宽度占比，所以缩放时很容易出现间距失衡的问题。咱们来调整代码，彻底解决这个问题：

修改后的完整代码 #

CSS

body { 
  height: 100vh; 
  width: 100%; 
  margin: 0; /* 移除默认边距，避免不必要的滚动条 */
}
#container { 
  height: 90%; 
  width: 100%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-direction: column; 
}
#display { 
  height: 76%; 
  width: 100%; 
  background-color: #ECECEC; 
  overflow: hidden; 
  position: relative; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
}
.content { 
  display: flex; 
  align-items: center; 
  gap: 2rem; /* 控制边框到文本的间距，和图标到边框的间距保持一致 */
  width: 95%; 
  padding: 0 2rem; /* 给整体加左右内边距，避免内容贴在容器边缘 */
}
.icon-wrapper { /* 新增容器：把图标和边框绑定，方便精准控制间距 */
  display: flex;
  align-items: center;
  padding-right: 2rem; /* 这个值和content的gap完全相同，保证两边间距一致 */
  border-right: 1px solid black;
}
.icon-wrapper i { 
  font-size: 7rem; /* 直接用font-size控制图标大小，替代fa-7x更灵活 */
}
.text { 
  flex: 1; /* 让文本容器占满剩余空间，避免固定宽度限制 */
  line-height: 1.6; /* 优化文本行高，提升可读性 */
}

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div id="container">
  <div id="display">
    <div class="content">
      <div class="icon-wrapper">
        <i class="fas fa-balance-scale"></i>
      </div>
      <div class="text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque volutpat libero, at venenatis dolor rutrum vel. Donec fermentum eleifend tortor, at sollicitudin est rutrum nec. Fusce eget vehicula ex. Vestibulum semper gravida nulla, in aliquam ipsum dignissim nec.</p>
      </div>
    </div>
  </div>
</div>

核心修改思路 #

1. 新增icon-wrapper容器：把图标和右侧边框放在同一个容器里，这样可以单独控制图标到边框的内边距，避免直接给图标加边框导致的布局混乱。
2. 用gap替代space-evenly：gap是Flex布局专门用来控制元素间距的属性，比space-evenly更精准，不会受元素自身宽度的影响，缩放时间距始终稳定。
3. 统一间距数值：让icon-wrapper的padding-right和.content的gap设置成完全相同的值（比如这里的2rem），这样图标到边框、边框到文本的间距就完全一致了。
4. 去掉固定百分比宽度：让文本容器用flex:1占据剩余空间，图标自适应大小，这样布局在各种屏幕尺寸下都能灵活调整，不会出现间距变形。

额外优化：适配小屏幕 #

如果需要在移动端保持良好布局，可以加一段媒体查询，让小屏幕下元素垂直排列，边框改到底部，间距依然保持一致：

@media (max-width: 768px) {
  .content {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }
  .icon-wrapper {
    border-right: none;
    border-bottom: 1px solid black;
    padding-right: 0;
    padding-bottom: 1.5rem;
  }
}

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