How to Prevent CSS Inputs with `width: 100%` from Exceeding Parent Boundaries?

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

In CSS, an element's width and height are applied to its content area, including padding. However, setting an element with padding to 100% width can result in it surpassing its parent's size.

Understanding the CSS Basic Box Model

The CSS Basic Box Model defines how an element's size and layout are calculated. It consists of content, padding, border, and margin.

When width: 100% is applied, it affects the content area's width. But if the element has padding, it extends beyond the content area, effectively increasing its overall size.

Breaking the Padding Barrier

To prevent padding from affecting an element's width and height, set the box-sizing CSS property to border-box:

box-sizing: border-box;

This instructs the browser to include the padding innerhalb of the element's width and height, preventing it from extending beyond the parent's bounds.

Browser Compatibility

box-sizing is supported by all major browsers, but consider using prefixes for older versions of Internet Explorer (prior to version 8).

Using box-sizing in the Context

To resolve the issue in your provided JSFiddle, add box-sizing: border-box; to the following rules:

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

Recommended "Inherited" Usage

Paul Irish and Chris Coyier recommend inheriting box-sizing from the html element to ensure consistency throughout the page:

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

The above is the detailed content of How to Prevent CSS Inputs with `width: 100%` from Exceeding Parent Boundaries?. For more information, please follow other related articles on the PHP Chinese website!