Why Does a CSS Input with `width: 100%` Extend Beyond Its Parent Container?

CSS Input with width: 100% Goes Outside Parent's Bound

You may have encountered a situation where an input field with width: 100% extends beyond its parent container in CSS. This occurs due to how the CSS box model handles padding.

By default, padding and margin are added on top of the width and height of an element. Normally, this isn't a problem. However, when an element has padding added and width: 100%, the padding pushes the content outside the parent's boundary.

To prevent this, we must change how the box model handles padding. The CSS property box-sizing allows us to do this. By setting box-sizing: border-box, the padding will be included in the element's width and height, effectively fixing the issue.

input[type=text],
input[type=password] {
  box-sizing: border-box;
  width: 100%;
  ...
}

This change ensures that the input fields will not exceed their parent's bounds, even with padding applied. Remember to check browser compatibility for box-sizing.

The above is the detailed content of Why Does a CSS Input with `width: 100%` Extend Beyond Its Parent Container?. For more information, please follow other related articles on the PHP Chinese website!