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?

Spoike · Accepted Answer · 2013-05-27 20:26:49Z

4

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.

answered May 27, 2013 at 19:32

Spoike

122k45 gold badges143 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sirko · Accepted Answer · 2013-05-27 19:19:37Z

2

It is possible using CSS calc():

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

answered May 27, 2013 at 19:19

Sirko

74.3k19 gold badges157 silver badges194 bronze badges