CODEWITHSUNDEEP
htmlcss
manu p
manu p

Reputation: 985

gap between elements inside 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>

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?

Upvotes: 0

Views: 40

Answers (3)

Ahmad
Ahmad

Reputation: 12717

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>

Upvotes: 2

Coskun Ozogul
Coskun Ozogul

Reputation: 2469

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>

Upvotes: 0

PiFanatic
PiFanatic

Reputation: 243

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

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

Upvotes: 0

Related Questions