Question 197461 in Html Question posted in
Some basic documentation can be found here.

How to adjust a space between the label and input field in HTML and CSS

I’m trying to create a design like this

Expected output form design

This is my output form design.. Im trying to create a form above i mentioned

I tried to add a margin and padding but it is not working.
I tried to add a space between the label and the input but it is not working either.

div.register {
  background-color: white;
  width: 100%;
  height: 400px;
  border-radius: .5rem;
  width: 300px;
}

.register input {
  width: 250px;
  border-radius: 1rem;
  margin-left: 8px;
}
<section class="home show-animate" id="home">
  <div class="content">
    <span>Take The Right Step <br>For Your Business</span>
    <p>Tax associate is a leading consultancy firm that provides <br> simple, effective company registration and accounting <br> solutions to enterprises in ireland.</p>
    <a href="#" class="btn">Get Started</a>
  </div>

  <div class="main">
    <div class="register">
      <h3>Apply for Tax Rebate Now</h3>
      <form action="" id="register" method="post">
        <div class="wrapper">
                    <label for="" >Name</label>
                    <div>
                      <input type="text" name="name" id="">
                    </div>

                    <label for="" > Email ID</label>
                    <div>
                        <input type="text" name="email">
                    </div>
                    <label for=""> PPS Number</label>
                    <div>
                        <input type="text" name="Email" id="">
                    </div>
                    <a href="#" class="btn">Get Started</a>
                </div>
      </form>
    </div>
  </div>
</section>
Tags:

2

Answers


  1. 0

    You can simply wrap them together inside a <div>, give it a class and style as you like.
    Example below

    html

    <div class="wrapper">
  <label for="name" >Name</label>
  <div>
    <input type="text" name="name" id="name">
  </div>
</div>

    css

    .wrapper {
  margin: 20px;
}

    I would also suggest two things to improve this code. First and most important, assign the for and id properties for label and input respectivelly. Second, the div wrapping input seems unnessessary.

    <div class="wrapper">
  <label for="name" >Name</label>
  <input type="text" name="name" id="name">
</div>
    Login or Signup to reply.
  2. 0

    Simply add a margin-bottom to every input with the exception of the last:

    div.register {
  background-color: white;
  width: 100%;
  height: 400px;
  border-radius: .5rem;
  width: 300px;
}

.register input {
  width: 250px;
  border-radius: 1rem;
  margin-left: 8px;
}

.register input:not(:last-child) {
  margin-bottom: 1em;
}
    <section class="home show-animate" id="home">
  <div class="content">
    <span>Take The Right Step <br>For Your Business</span>
    <p>Tax associate is a leading consultancy firm that provides <br> simple, effective company registration and accounting <br> solutions to enterprises in ireland.</p>
    <a href="#" class="btn">Get Started</a>
  </div>

  <div class="main">
    <div class="register">
      <h3>Apply for Tax Rebate Now</h3>
      <form action="" id="register" method="post">
        <label for="name">Name</label>
        <input type="text" name="name" id="name">

        <label for="email" style="margin-bottom: 8px;"> Email</label>
        <input type="text" name="Email" id="email">
      </form>
    </div>
  </div>
</section>

    Note, that an input should always have an id so you can connect the label to it unless you nest the input within the label.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search