The input text element flow out of the container element, when setting the width to 100%

Question

Now im having an input text element which be warpped by a div container (form-group)

And i set the width to the input text element become 100% (width: 100%). And i expect that the input text it will cover the entire width of the form-group div element. And the result is kinda weird to me. The input text, it likes it flow out of the form-group element, like the this picture here:

In this picture, im currently hover the form-group element, and you can see the orange part, is the margin of the it, but you can see, the input text element, the part i highlighed is like overlaying the margin of the form-group element, which proved that the input text element is flow out of the container element of it, which is the form-group element. And that's weird, at least to me, because I set the width to 100%, and so i think it should be cover the container element of it. Please help me to understand this.

I know i can use the overflow property to fix but, i want to know why this is happening, so hopefully, someone can help me with this, thank you so much.

.form-container {
  background-color: black;
  padding: 20px;
}

.form-group {
  width: 50%;
  font-size: 1.5rem;
  background-color: red;
  margin: 3rem auto;
  display: block;
}

input {
  padding: 1.5rem 2rem;
  border-radius: 2px;
  border: none;
  outline: none;
  width: 100%;
  color: var(--primary-color);
}

<form action="#" class="form-container">
    <div class="form-group">
        <input type="text" placeholder="Enter text...">
    </div>
</form>

I checked your code and the text covers the whole `.form-group`, maybe you need to clear/reset your browser cache. — Mohsen TOA, Sep 05 '21 at 06:14

score 1 · Answer 1 · answered Sep 05 '21 at 06:25

You are coming up against box-sizing.

The input has quite a noticeable padding added to it (3rem horizontally in all). While the basic element takes up the width of its parent on the width: 100% setting, the box-sizing is set to content by default in CSS. This means any padding (and borders) is outside the basic size.

Changing the box-sizing to border-box for the input means that the padding is included within the overall size so you get the width you expect - in total 100% of the parent:

input {
    padding: 1.5rem 2rem;
    border-radius: 2px;
    border: none;
    outline: none;
    width: 100%;
    color: var(--primary-color);
    box-sizing: border-box; /* ADD THIS */
}

Design Freek · Answer 2 · 2021-09-05T06:36:00.447

1

In html every elements have default padding and margin property..we overlapped this values.

use following code..to avoid these kind of issues.

* { 
padding: 0px;
margin:0px;
box-sizing:border-box;
}

edited Sep 05 '21 at 06:36

answered Sep 05 '21 at 06:29

Design Freek

183
2
7

Shriyacodes · Accepted Answer · 2021-09-05T06:50:17.657

This happens because by default the box-sizing property is content-box. When you add padding to the input element, the input element size remains equal to the size of form-group div.

But, this increases the overall width of the input element and extends it outside as the padding adds up to the total width. It looks like the actual width of the input element has increased but actually just the padding is adding. You can change this if you wish to, by changing the box-sizing to border-box. This way the padding gets added to the input element by compromising the actual size of the input element.

 input {
    box-sizing: border-box;
    padding: 1.5rem 2rem;
    border-radius: 2px;
    border: none;
    outline: none;
    width: 100%;
    color: var(--primary-color);
}

Also, after adding border-box, you can try adding some height to the form-group div to visualize their comparative heights.

Use this developer tool on your browser to help you see the width, padding and margins.

The input text element flow out of the container element, when setting the width to 100%

3 Answers3