CSS3 let's you do a lot of cool stuff, most of which add graphical enhancements like gradients and rounded corners, all of which are great. Lately however, I think my favorite new property is
There are two modes:
content-box is default, and will calculate the true width for an element as width+padding+border. So if you have a child <div> with 100% width and 10px of padding, it will extend outside the parent <div>. Here's an example of
The parent<div> has a black background and the child has a red background with 50% opacity (rgba is another awesome new tool to use with css)
border-box, the padding and border are included in the width of the element. So an element with width: 300px; and padding: 10px; will still have a width of 300px, rather than 320px. Here's the example from above using
This allows for more fluid specification of widths in a lot of instances. Say you need a textarea with width: 100%, you can add padding to it and not have to worry about it extending to be wider than what you really want. Before, I always had to set a fixed width, which obviously isn't ideal when developing a site you want to work in a variety of resolutions and devices (mobile).
box-sizing property doesn't work in IE 7, but you can get around that with this.
Here's how you implement it:
/* Firefox */
/* Webkit */
/* IE */
/* Opera */
Hope this helps you out like it has helped me!