A div containing an input box, both set to width: 100%, and the input box overshoots the div by a little bit on the right margin. Why?

<div style="border: 1px dashed grey; padding: 50px;">
 <div style="border: 1px solid green; width: 100%; padding: 20px 0 20px 0">
  <input style="border: 1px dotted red; width: 100%;" placeholder="placeholder">
 </div>
</div>

CodePudding user response：

Did you declare the box-sizing so it adjusts to the border box?

In HTML, unless specified, the padding, border and content are not included in the total space that the element takes in the page. This means, that as default, the size specified by the element in the style (HTML or CSS) is exclusively for the content, so the padding and border will take extra space.

Here's a pic of a drawing I just made explaining the difference between box and content sizing in HTML/CSS:

box-sizing in HTML

So in order to avoid that, you either want to:

1. Manually take into account the padding, border width and content width so that all of them together make 100% (which is hard, and you need to count that padding and border if not just one sided are usually doubled %).
2. Or adjust the box-sizing to the border:

html {
  box-sizing: border-box;
}

I personally recommend the 2nd one because you don't need to be calculating anything else, but in case you don't want to use it, maybe you could use the function 'calc()' to make it easier.

Finally, unasked but, I would recommend you to avoid using so many and styling in CSS instead of inside the HTML.

There's many block type html elements (aside, section, article, fieldset) that are more specific semantically and ultimately learning those might be the difference between good and bad HTML practices.

CodePudding user response：

It happens for two reasons :

• The input has a default padding set by the browser
• 2px are added by the border

Edit

As Anas Mohammad Sheikh mentioned in comment, you can fix it by setting box-sizing:border-box

.container {
  border: 1px dashed grey;
  padding: 50px;
}

.content {
  border: 1px solid green;
  width: 100%;
  padding: 20px 0;
}

input {
  border: 1px dotted red;
  width: 100%;
  box-sizing: border-box;
}

<div >
  <div >
    <input placeholder="placeholder">
  </div>
</div>

Previous answer

Here I removed the padding with padding: 0 and reduced the input with by 2 * border size (for left and right).

.container {
  border: 1px dashed grey;
  padding: 50px;
}

.content {
  border: 1px solid green;
  width: 100%;
  padding: 20px 0;
}

input {
  --border: 1px;
  border: var(--border) dotted red;
  width: calc(100% - 2 * var(--border));
  padding: 0;
}

<div >
  <div >
    <input placeholder="placeholder">
  </div>
</div>

In the example width: calc(100% - 2 * var(--border)) is the same as width: calc(100% - 2px)

Note : padding: 20px 0 20px 0 is the same as padding: 20px 0