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

Html – Margin between textbox and label

I want to a gap between a checkbox and a span. I wrap a checkbox and a span in label element.

i tried all possible ways to add a gap between the two elements but didn’t work. pls, help

HERE IS THE HTML
<div class="options">
                    <label>
                        <input type="checkbox">
                        <span>Keep me logged in</span>
                    </label>
                    <a href="#">Reset Password</a>
                </div>
HERE IS THE CSS
/*.options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.options label {
    display: flex;
    align-items: center;
    color: #777;

}

.options .input[type="checkbox"] {
    margin-right: 1px; 
*/
Tags:

2

Answers


  1. 0

    This is not the correct way of using the label tag.

    you could just go with
    <input type="checkbox" id="input1"> <label for="input1" class="label1">Keep me logged in</label>

    The for attribute can be used to associate a label with an input
    you can wrap both inside div element if you have multiple and just put spacing using class added to label and margin css.

    .options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.options div {
    display: flex;
    align-items: center;
    color: #777;

}

.options label {
    margin-right: 20px; 
}
    <div class="options">
  <div>
    <label for="cb1">Keep me logged in</label>
    <input type="checkbox" id="cb1">
  </div>
  <a href="#">Reset Password</a>
</div>

    Hope this helps!. Please accept and upvote answer if it does.

    Login or Signup to reply.
  2. 0 
    <form>
  <label>
      Username:
      <input type="text" name="username" style="margin-left: 1rem">
    </label>
</form>

    1.The for attribute of must be equal to the id attribute of the
    related element to bind them together.

    This one you can refer to @Vipul’s answer

    2.A label can also be bound to an element by placing the element inside
    the element.

    <form>
    <label>
      Username:
      <input type="text" name="username" style="margin-left: 1rem">
    </label>
  </form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search