Values and Sizing 203
The expression first multiplies 10 percent by 5, and then adds it to
the result of 15 percent multiplied by 2. This setup works fine, but it’s is not
immediately apparent when you look at it, and given a quite complex calcu-
lation could be difficult indeed to immediately understand. The expression
becomes easier when written with parentheses:
E { height: calc((10% * 5) + (15% * 2)); }
You can also use nested calc() functions to achieve the same result.
When using multiplication or division in an expression, you must insert
a single whitespace character around the operand—failing to do this means
the expression is invalid and the property will be ignored. The following
code shows an expression written twice: the first one is invalid because it
has no space around the operand; the second is correctly formatted and,
therefore, valid.
E { border-width: calc(1em*10); } /* Invalid */
E { border-width: calc(1em * 10); } /* Valid */
Sizing Elements
The size of an element is generally set using the width or height properties
or their max- and min- variants, together with either an absolute (px), rela-
tive (em), or percentage value. Although these options are good enough for
most day-to-day use, I often find times when I wish the box model were a
little more flexible or aware of the elements around it. CSS3 introduces new
properties and values aimed at providing this extra flexibility through a
box-model toggle and new content-aware sizing methods.
Box Sizing
For many years, Internet Explorer implemented its box model in contraven-
tion of the W3C spec. The W3C model dictated that the width value was the
width of the content box and that any padding and borders were extra. In
IE’s model, on the other hand, the width value was equal to the total width
of the element including any padding and borders. Consider these style
rules:
E {
border: 5px;
padding: 10px;
width: 100px;
}
In the IE model, the content box would be 70px wide, whereas in the
W3C model, it would be the full 100px.
