How to put space between horizontal input fields in css

Question

I am working on a basic react project. I want to put space between 2 horizontal input fields ( without grid ). Anyhelp will be helpful as I am in learning phase.

The style I am using for fields

.grocery {
  padding: 0.25rem;
  padding-left: 1rem;
  background: var(--clr-grey-10);
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
  border-color: transparent;
  font-size: 1rem;
  flex: 1 0 auto;
  color: var(--clr-grey-5);
}

The react code snippet:

 <div className='form-control'>
        <input type='text' name='Principal'className='grocery' placeholder='principal amount' value={name} onChange={(e)=>setName(e.target.value)}/>
        <button type='submit' className ='submit-btn'>
          {isEditing ? 'edit' :'submit'}
        </button>
        <input type='text' name='cash inflow'className='grocery' placeholder='cash inflow' value={name} onChange={(e)=>setName(e.target.value)}/>
        <button type='submit' className ='submit-btn'>
          {isEditing ? 'edit' :'submit'}
        </button>
      </div>

Add margin to .grocery to create that extra space you want — AbhishekGowda28
– AbhishekGowda28, Commented Jun 2, 2021 at 8:48
Thank you, I added ``` margin-left: 25px;``` in .grocery and its perfectly reflecting. — Priya
– Priya, Commented Jun 2, 2021 at 9:04

TechySharnav · Accepted Answer · 2021-06-02 08:56:20Z

2

You can add margin-right to .submit-btn. This will make sure, the button and input will stay together.
(Also, you can use :first-child for .submit-btn so that margin is only applied to the 1st button and not all.)

.grocery {
  padding: 0.25rem;
  padding-left: 1rem;
  background: #F1F5F8;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  border-color: transparent;
  font-size: 1rem;
  flex: 1 0 auto;
  color: #F1F5E4;
}

.submit-btn{
  margin-right: 25px; 
}

<div className='form-control'>
        <input type='text' name='Principal' class='grocery' placeholder='principal amount'>
        <button type='submit' class='submit-btn'>
          submit
        </button>
        <input type='text' name='cash inflow' class='grocery' placeholder='cash inflow'>
        <button type='submit' class='submit-btn'>
          submit
        </button>
      </div>

answered Jun 2, 2021 at 8:56

TechySharnav

5,1142 gold badges13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Priya Over a year ago

This also works for me, either need to add margin-right in .submit-btn or margin-left:25px in .grocery

TechySharnav Over a year ago

@Priya Yeah. But it will also get applied to 1st input, which will also cause it to move 25px from left.

Priya Over a year ago

right. Chances are there 1st field moves more towards left(if I use more left margin px) which cause unequal margins for both input boxes, to balance I used both margin-right:25px in .submit-btn and margin-left:25px in .grocery, this is balancing and equalizes both input box margins.

lupz · Accepted Answer · 2021-06-02 09:07:00Z

You should wrap your elements in container elements to do this and keep the button and input together.

.form-control {
  background-color: teal;
  display: flex;
}

.container {
  padding: 1em;
}

.grocery {
  padding: 0.25rem;
  padding-left: 1rem;
  background: white;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-color: transparent;
  font-size: 1rem;
  color: black;
}

<div class='form-control'>
  <div class="container">
     <input type='text' name='Principal' class='grocery' placeholder='principal amount' />
     <button type='submit' className ='submit-btn'>submit</button>
  </div>
  <div class="container">
    <input type='text' name='cash inflow' class='grocery' placeholder='cash inflow'/>
    <button type='submit' className ='submit-btn'>submit</button>
  </div>
</div>

Here I added 2 container divs with a padding of 1em and set display-property of the .form-control div to flex.

Aizaz Malik · Accepted Answer · 2021-06-02 10:31:45Z

0

You can write

 

between both elements in the HTML to get the space quickly. However, a better approach would be to add margin-right as explained by @TechySharnav.

edited Jun 2, 2021 at 10:31

answered Jun 2, 2021 at 9:01

Aizaz Malik

113 bronze badges

3 Comments

marko-36 Over a year ago

& nbsp; needs to be   (without space), if used. CSS styling might make more sense, in case of several input fields.

Aizaz Malik Over a year ago

Thanks. It was a typo.

Priya Over a year ago

@AizazMalik I asked space between horizontal input fields, it think what you shared is applicable for input fields in next line(vertically placed)

Ali Shefaee · Accepted Answer · 2021-06-02 12:05:10Z

.form-control {
  background-color: teal;
  display: flex;
  **justify-content: space-between;**
}

.grocery {
  padding: 0.25rem;
  padding-left: 1rem;
  background: white;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-color: transparent;
  font-size: 1rem;
  color: black;
}

<div class='form-control'>
  <div class="container">
     <input type='text' name='Principal' class='grocery' placeholder='principal amount' />
     <button type='submit' className ='submit-btn'>submit</button>
  </div>
  <div class="container">
    <input type='text' name='cash inflow' class='grocery' placeholder='cash inflow'/>
    <button type='submit' className ='submit-btn'>submit</button>
  </div>
</div>

Collectives™ on Stack Overflow

How to put space between horizontal input fields in css

4 Answers 4

3 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related