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 Using calc() in Padded Containers

Posted by Antonio Jaramillo
Antonio Jaramillo
15,604 Points

Why doesn't calc(100% + 3em) not work by itself in this example?

Why do browsers require the margin-left: -1.5em adjustment?

Hazel Kenady
seal-mask
.a{fill-rule:evenodd;}techdegree
Hazel Kenady
Front End Web Development Techdegree Student 16,744 Points
Hazel Kenady
.a{fill-rule:evenodd;}techdegree
Hazel Kenady
Front End Web Development Techdegree Student 16,744 Points

In Guil's example, you are using calc() to calculate the width the of the image. The calculation doesn't impact margin or padding; only the width of the image. So when Guil did his calculation, it only added length to the image on one side (the right side), not both. It's probably just a just a function of calc().

If you look at the CSS properties of .card, you'll see he has set padding to 0, 1.5em and 1em. The position of the 1.5em adds 1.5em of padding to the left and right of the contents. Now when he made the image longer with calc() it overrode the 1.5em padding on the right only. You still have to deal with the 1.5em padding on the left.

To override, he added a margin so the picture sits flush against the border. Using padding-left: -1.5em doesn't get you the same result; it actually doesn't do anything.