gap between elements inside div-CodePudding

<div  style="display:flex">
  <div >
    <label  id="t" for="totalMV">Total:</label>
    <input id="totalMV" type="number"  value="0"/>
  </div>
  <div >
    <label  id="decim" for="decimal">Dec</label>
    <input  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?

CodePudding user response：

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

.input1 {
  gap: 12em;
}

.input1 {
  gap: 12em;
}

<div  style="display:flex">
  <div >
    <label  id="t" for="totalMV">Total:</label>
    <input id="totalMV" type="number"  value="0" />
  </div>
  <div >
    <label  id="decim" for="decimal">Dec</label>
    <input  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>

CodePudding user response：

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

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

CodePudding user response：

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  style="display:flex">
  <div >
    <label  id="t" for="totalMV">Total:</label>
    <input id="totalMV" type="number"  value="0"/>
  </div>
  <div >
    <label  id="decim" for="decimal">Dec</label>
    <input  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  style="display:flex">
  <div >
    <label  id="t" for="totalMV">Total:</label>
    <input id="totalMV" type="number"  value="0"/>
  </div>
  <div >
    <label  id="decim" for="decimal">Dec</label>
    <input  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>