如何为flex布局的div内部元素添加间距？

当然可以给这个Flex布局里的两个元素添加间距，有几种简单的实现方式：

方法1：使用Flex布局的gap属性（推荐） #

这是最简洁的方案，直接在Flex容器的样式里添加gap属性，指定元素间的间距大小：

<div class="input1" style="display:flex; gap: 1.5rem;">
  <div class="form-group shiny-input-container">
    <label class="control-label" id="t" for="totalMV">Total:</label>
    <input id="totalMV" type="number" class="form-control" value="0"/>
  </div>
  <div class="form-group shiny-input-container">
    <label class="control-label" id="decim" for="decimal">Dec</label>
    <input class="js-range-slider" id="decimal" data-skin="shiny" data-min="0" data-max="1" data-from="0.5" data-step="0.1" data-grid="true" data-grid-num="10" data-grid-snap="false" data-prettify-separator="," data-prettify-enabled="true" data-keyboard="true" data-data-type="number"/>
  </div>
</div>

gap属性会自动在Flex子元素之间添加均匀的间距，不需要单独给每个子元素设置margin，兼容性也很好。

方法2：给子元素添加margin #

如果需要更灵活的控制（比如只给某个元素加间距），可以给子元素设置margin：

<div class="input1" style="display:flex;">
  <div class="form-group shiny-input-container">
    <label class="control-label" id="t" for="totalMV">Total:</label>
    <input id="totalMV" type="number" class="form-control" value="0"/>
  </div>
  <div class="form-group shiny-input-container" style="margin-left: 1.5rem;">
    <label class="control-label" id="decim" for="decimal">Dec</label>
    <input class="js-range-slider" id="decimal" data-skin="shiny" data-min="0" data-max="1" data-from="0.5" data-step="0.1" data-grid="true" data-grid-num="10" data-grid-snap="false" data-prettify-separator="," data-prettify-enabled="true" data-keyboard="true" data-data-type="number"/>
  </div>
</div>

这里给第二个子元素添加margin-left，只在两个元素之间产生间距。

方法3：在Shiny中用自定义CSS（更规范） #

如果你是在Shiny应用中使用这段代码，推荐在UI里添加全局自定义CSS，避免内联样式的混乱：

tags$style(HTML("
  .input1 {
    display: flex;
    gap: 1.5rem; /* 或者用margin的方式 */
  }
"))

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