How does box-shadow property affect the box-module is css?

views:

answers:

+2 Q:

How does box-shadow property affect the box-module is css?

Does adding a box-shadow property to a div change it's dimension? For example, what is the correct width in compliant browsers for the div MyDiv?

202px (borders and width)
203px (borders width and horizontal shadow size)
207px (borders width and shadow blur)
None of the above

div.MyDiv { width:200px; border:1px solid #cccccc; -moz-box-shadow:1px 1px 7px rgba(153, 153, 153, 0.2); }

Many thanks!

+1 A:

202px

The box-shadow is not considered in the total width of the element

Nick Allen - Tungle139 2010-02-26 15:11:33

Allen, this is what I thought, but my testing shows this is not the case: I have a div with 5px padding, 5px margin, 1px border, and 900px width. This should measure at 5+5+5+5+1+1+900 = 922. But Firefox is rending it as 923 (I have a shadow of :1px 1px 7px).

Mel 2010-02-26 15:16:41

Never mind, I found a bug in my code. You are right, it doesn't.

Mel 2010-02-26 15:22:00