Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed The CSS calc() Function!
You have completed The CSS calc() Function!
Preview
Learn how to use calc() to display full-width elements when placed inside padded containers.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Normally when you apply
padding to a container,
0:00
the padding creates white
space around its content.
0:01
It pushes content like images,
paragraphs, and headings inwards.
0:04
Sometimes you don't want padding to
effect all the elements in a container.
0:08
For instance, you might want white
space around the text only, but
0:12
no space around an image above the texts.
0:16
Now there are several methods you can
use to get around the padding and
0:19
it usually involves a little bit of math.
0:23
And the math gets trickier when you don't
know the exact width of the container
0:25
because it's fluid.
0:29
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up