How to use padding inside of a box without altering its size?
The box-sizing
CSS3 property can do just this. The border-box
value (as opposed to the content-box
default) makes the final rendered box the declared width, and any border and padding cut inside the box. We can now safely declare our textarea to be of 100% width, including pixel-based padding and border, and accomplish out layout perfectly.
CSS:
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
No comments:
Post a Comment