9

Possible Duplicate:
Is css box-shadow part of element's box model?

Does a css border-shadow property add to an element's size or is it added after and not effect other elements?

So say my div width is 100px, margin 10px, border 1px, padding 5px, box-shadow 2px, is the total width of the element 136px (inclusive of all the above) or 132px (just the first four).

Community
  • 1
  • 1
Gga
  • 4,311
  • 14
  • 39
  • 74

4 Answers4

8

no, the shadow doesn't affect the elements size (just like an outline; read more about this here). To answer the example: your div is 132px wide.

KyleMit
  • 30,350
  • 66
  • 462
  • 664
oezi
  • 51,017
  • 10
  • 98
  • 115
3

No, the box-shadow is not part of the element, meaning that the shadow is not considered in the final total measure of the element.

Source: http://css.flepstudio.org/en/css3/box-shadow.html

KyleMit
  • 30,350
  • 66
  • 462
  • 664
MCSI
  • 2,818
  • 26
  • 35
1

According to the CSS3 box-shadow specification:

An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only: it is clipped inside the border-box of the element.

For more information, see http://www.css3.info/preview/box-shadow/

The FireBug or Google Chrome inspectors are useful tools for this sort of thing, too.

msanford
  • 11,803
  • 11
  • 66
  • 93
0

132px

I think shadow does not compute.

robermorales
  • 3,293
  • 2
  • 27
  • 36