Menu
I have an html input.
The input has padding: 5px 10px; I want it to be 100% of the parent div's width(which is fluid).
However using width: 100%; causes the input to be 100% + 20px how can I get around this?
Example
590
The width property does not contain padding, borders, or margins. The width property is overridden by the min-width and max-width properties.
The padding size is relative to the width of that element's content area (i.e. the width inside, and not including, the padding, border and margin of the element). So, if your #wrapper is 940px wide, 5% padding = 0.05 × 940pixels = 47 pixels.
The box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and height: Both divs are the same size now!
To avoid the width or height getting increased or decreased when using CSS properties like margin , padding , etc, we can use the CSS property called box-sizing and set its value to border-box on the element in CSS.
box-sizing: border-box is a quick, easy way to fix it:
This will work in all modern browsers, and IE8+.
Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/
.content { width: 100%; box-sizing: border-box; } The browser prefixed versions (-webkit-box-sizing, etc.) are not needed in modern browsers.
100
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
