Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Enhancing the Design With CSS Box Shadows

Posted by Kit Howlett
Kit Howlett
6,774 Points

Do box-shadows increase the height or width of an element?

Is you add padding or margin to an element, my understanding is that element then increases in size (providing you don't use box-sizing: border-box;). So if a div has a width of 1180px and margin left and right of 10px then width would increase to 1200px.. correct?

Does the same happen when working with box-shadows? If so would you use border-box to prevent this?

Thank you!

1 Answer

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Padding increases the size when using the content-box sizing model. However, margins are outside of the element and create space between elements but do not affect the size of the element itself.

Effects like box-shadow don't affect the size or the spacing.

Kit Howlett
Kit Howlett
6,774 Points

Thank you!