CODEWITHSUNDEEP
htmlcssinputspacing
Lavanya K
Lavanya K

Reputation: 1

How to add spacing between input text fields side by side?

How to add spacing between input text fields side by side?

Required spaces in the marked area:

enter image description here

<label for="Std">Start Trade Date</label>
<input type="text" id="Std" name="Std" placeholder="Enter start date">


<label for="End">End trade Date</label>
<input type="text" id="End" name="End" placeholder="Enter end date">

<label for="Fqy">Frequency</label>
<input type="text" id="Fqy" name="Fqy" placeholder="Frequency">

Upvotes: 0

Views: 640

Answers (1)

Harrison
Harrison

Reputation: 2375

You could use something like display: flex with a gap value.

I added wrap because it can help with when the screen size/parent element is too small. You can also see how the gap is maintained between rows and columns...

.dispalyFlex {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
<div class="dispalyFlex">
  <div>
    <label for="Std">Start Trade Date</label>
    <input type="text" id="Std" name="Std" placeholder="Enter start date">
  </div>
  <div>
    <label for="End">End trade Date</label>
    <input type="text" id="End" name="End" placeholder="Enter end date">
  </div>
  <div>
    <label for="Fqy">Frequency</label>
    <input type="text" id="Fqy" name="Fqy" placeholder="Frequency">
  </div>
</div>

Upvotes: 1

Related Questions