Space between inputs ?! (Beginner lvl)

HTML-CSS
1

Hello,

I was working on my Survey Form project and everything was fine until I started styling the inputs and their containers !

https://codepen.io/Tech_CA_Bro/pen/bjQBVE

If you click the link you’ll get on my codepen.io and see that I’m not that far because I’ve been trying to put space between my inputs and labels while trying to make sure they are aligned.

Here are some screenshots to make sure you understand what I’m saying because I might be a bit confusing (sorry about that) :

1 - First screenshot is what I’m aiming to do but with my own style and ofc with understanding, I’ve tried looking on google multiple websites and their code but I still couldn’t do it : https://postimg.cc/image/w962lf53x/

2 - Second screenshot is what I’ve done :smiley: : https://postimg.cc/image/momfyyfwd/

Not sure where the problem is coming from, I assumed it is from my lack of knowledge when it comes to:

  • spacing using margin and padding
  • display, position, float props that I don’t really understand (I’d love explanations)
  • Eventually (not very certain of that) my div structure that’s not very well made but I’m pretty sure it’s good

Thank you very much,

  • Tech.
2 
<label for="male">male</label>
 <input type="text" name="name" id="name"  value="male"><br>

and
is good practice surround it
paragraph

<p>

<label for="male">male</label>
  <input type="text" name="name" id="name"  value="male">
</p>

And the style you can place in css window.

3

Hey thanks for the reply! However that’s not my problem my problem is making sure the space between the first and the second label AND input is the same again and again.

I found a fix but not using CSS just HTML :

        <div id="header-content">
            <div id="header">
                <h1 id="title">Survey - Who are you ?</h1>
                <p id="description">We'd like to know a little more about you ! :D</p><hr>
            </div>
            <div class="input-line">
                 <div class="labels">
                    <label for="name">* Name:</label><br>
                </div>
                <div class="input-spot">
                    <input type="text" name="name" id="name" placeholder="First/Last names" autofocus required><br>     
                </div>
            </div>
            <div class="input-line">
                <div class="labels">
                    <label for="email">* Email adress:</label><br>  
               </div>
               <div class="input-spot">
                <input type="email" name="email" id="email" placeholder="example@mail.com" 
                pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" required>      
               </div>
           </div>
        </div>

I did this instead of putting the labels in the same divs and the inputs inside the same div so that all my CSS would be applied and re-applied.

Thanks! :smiley:

4

As I see most of solution put the label up, I now notice I have same problem in my. because you declare flex.

its possible to fix manually set margin between label and input, but you must give up, separately label and inputs class


so here is
image
image1920×1080 349 KB
5

What do you mean by : ‘‘put the label up’’ ? I found a fix using HTML5 like above but I don’t know using CSS.

6

image
image1920×1080 447 KB

I am trying this

form>p>label, p>select{
 display: inline-flex;
  flex-flow: row;
}
label, input, select, button{width:20%;
 margin: auto;
  }
7

you must set for label fix width …200px
and float:left
label {
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 18px;
color: #333;
height: 20px;
width: 200px;
margin-top: 10px;
margin-left: 10px;
clear: both;
float:left;
}*/

1 Like
8

Alright I’m re-starting the project from 0 I’ll maybe try that :smiley: Thanks alot !

1 Like
9

This is a solution i had suggested before to someone, maybe it might help you, have a look at this,

1 Like
10

Hmm. I’ll keep that. I’m done with my project I passed all tests but it is poorly responsive and designed so I will definitly re-do it before doing my portfolio.

Thanks!