Input width greater than the container

Question

In the following HTML code:

<div>
  <label id="name-label">
    NOMBRE
    <input type="text" id="username" name="username" placeholder="Introduce tu nombre" required>
  </label>
</div>

By applying the following CSS

div{
  border: 2px solid orange;
}

label{
  background-color: blue;
  display: block;
}

input{
  width: 100%;
}

The input element occupies more space than the label element that contains it.

Why does this happen? If 100% refers to the parent, which in this case is the label element... it could never take up more space, could it?

How could I solve it. Thank you very much.

You need to add box-sizing: border-box; CSS property for input tag. @David — Jainam, Mar 01 '23 at 11:19

score 1 · Answer 1 · answered Mar 01 '23 at 11:25

This happens because by default box-sizing: content-box; is used what means that your input is 100% width + padding width + border width.

To fix this you should remove default padding and border from the input field:

input{
  width: 100%;
  padding: 0;
  border: none;
}

or you should change box-sizing to border-box (where padding and border are included in 100% of the width):

input{
  width: 100%;
  box-sizing: border-box;
}

score 0 · Answer 2 · answered Mar 01 '23 at 11:26

0

input elements are taking border and padding. You have to set it to zero.

input{
  width: 100%;
  border: none;
  padding: 0;
}

Use this CSS for input field. This will fix!

answered Mar 01 '23 at 11:26

Kaushik C

114
9

Input width greater than the container

2 Answers2