gap between elements inside div

Question

<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">
    <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>

Is there a way to add a gap between elements inside div. Right now there is no space/gap between these 2 elements. But can we add?

Does this answer your question? [When to use margin vs padding in CSS](https://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css) — Nitheesh, Sep 07 '22 at 12:04
Does this answer your question? [Better way to set distance between flexbox items](https://stackoverflow.com/questions/20626685/better-way-to-set-distance-between-flexbox-items) — Cédric, Sep 07 '22 at 12:08
(Check the [second answer](https://stackoverflow.com/a/58041749/17684809) about gap properties) — Cédric, Sep 07 '22 at 12:09

score 2 · Answer 1 · answered Sep 07 '22 at 12:05

since you are already using flex, why not utilize its useful gap system like this:

.input1 {
  gap: 12em;
}

.input1 {
  gap: 12em;
}

<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">
    <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>

score 0 · Answer 2 · answered Sep 07 '22 at 12:01

0

You can use the column-gap attribute on the outer div:

div.input1 {
    display: flex;
    column-gap: 1em;
}

answered Sep 07 '22 at 12:01

PiFanatic

233
1
4
14

score 0 · Answer 3 · answered Sep 07 '22 at 12:02

You can use padding who will align elements inside div or you can use margin to align your div.

.shiny-input-container{
padding-left:20px;
}

<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">
    <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>

<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">
    <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 between elements inside div

3 Answers3