如何使用CSS实现盒子相邻排列且中间保留少量间距，现有代码不生效

问题原因 #

• 你给.RoundBox2设置的padding-left: 20vw是盒子内部的左内边距，只会增加第二个盒子自身的总宽度，无法实现两个盒子的间距效果
• 你写的box-shadow属性缺少偏移量、模糊半径参数，样式不会生效

解决方案1：Flex布局（更推荐） #

给两个盒子套一层父容器即可，HTML代码：

<!-- 普通HTML写法，React项目把class换成className即可 -->
<div class="box-wrapper">
  <div class="RoundBox"></div> 
  <div class="RoundBox2"></div>
</div>

CSS代码：

.box-wrapper {
  display: flex;
  gap: 10px; /* 可自行调整数值修改两个盒子的间距 */
}
.RoundBox {
  border-radius: 10px;
  border: 1.5px solid grey;
  box-shadow: 0 0 2px #e3eaf6;
  width: 20vw;
  height: 3vw;
}
.RoundBox2 {
  border-radius: 10px;
  border: 1.5px solid grey;
  box-shadow: 0 0 2px #e3eaf6;
  width: 20vw;
  height: 3vw;
}

解决方案2：保留原有float布局 #

删除.RoundBox2的padding-left: 20vw属性，给第一个盒子添加右外边距即可：

.RoundBox {
  border-radius: 10px;
  border: 1.5px solid grey;
  box-shadow: 0 0 2px #e3eaf6;
  width: 20vw;
  height: 3vw;
  float: left;
  margin-right: 10px; /* 可自行调整数值修改两个盒子的间距 */
}
.RoundBox2 {
  border-radius: 10px;
  border: 1.5px solid grey;
  box-shadow: 0 0 2px #e3eaf6;
  width: 20vw;
  height: 3vw;
  float: left;
}

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