Using multiple CSS Units in one line

Question

Is it possible to use multiple units in one line of CSS code? For example:

width: 20% + 5px;

Im presuming not. If so, how do you do it in a language such as javascript?

Answer 1

As Sirko pointed out, there is calc(). Unfortunately there is a catch with using that function: out of the major browsers IE <9 and Opera does NOT support it.

If all you want is to include a padding then you can achieve the same thing with the box-sizing attribute set to border-box that has far better browser support. For IE<8 there is also a polyfill available.

.span20 {
    -moz-box-sizing: border-box;
         box-sizing: border-box;

    width: 20%;
    padding: 5px;
    float: left;
}

Here is a jsfiddle demonstrating the above.

Answer 2

It is possible using CSS calc():

width: -webkit-calc(20% + 5px);
width:    -moz-calc(20% + 5px);
width:         calc(20% + 5px);

Browser Support