Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn how to use calc() to display full-width elements when placed inside padded containers.
Resources
Okay, so now you're going to learn
how to display full width elements
0:00
when placed inside padded containers.
0:04
Normally when you apply
padding to a container,
0:07
the padding creates white
space around its content.
0:10
It pushes content like images,
paragraphs, and headings inwards.
0:13
Sometimes you don't want padding to
effect all the elements in a container.
0:17
For instance, you might want white
space around the text only, but
0:21
no space around an image above the texts.
0:25
Now there are several methods you can
use to get around the padding and
0:28
it usually involves a little bit of math.
0:32
And the math gets trickier when you don't
know the exact width of the container
0:34
because it's fluid.
0:38
So let's see how Calc can
help us figure this out.
0:39
You can follow along in workspaces by
clicking the Launch Workspace button
0:43
on this page.
0:47
So in the workspace, the index.html
file contains a div container
0:48
with the class card, and inside card
we have a heading and two paragraphs.
0:54
Now when we preview this
page in the browser,
1:00
notice how the card container has
padding on the left and right sides.
1:03
The padding adds extra white
space around the text.
1:09
So now I want to add an image
inside this container.
1:12
Back in my Index.html file
inside the card container,
1:16
right about the h3 element,
I'm going to add an image element.
1:20
And I want to add this mountians.jpg
image inside the card container.
1:26
So as the source value I'm
going to type mountians.jpg.
1:33
Then I'm going to open
up my style.css file and
1:40
scroll down to this Calc Styles
comment section here.
1:45
So right below the comment,
I'm going to target the image element
1:49
and give it a max width of 100%.
1:55
So when we view it in the browser,
the padding on the left and right sides of
2:00
the card container creates a gap on
the left and right sides of the image.
2:04
Now I want the image to be the full
width of its card container.
2:10
That would look much nicer.
2:14
So, we can take advantage of the calc
function to get around this padding issue.
2:16
Back in the image rule,
2:21
I'm going to change the max-width
value to a calc function.
2:22
So I'll type calc, and as the expression,
2:27
I'm going to type 100% + 3em.
2:31
Adding 3em to the total width
of the image makes up for
2:35
the 1.5em padding on the left and
right sides of the card container.
2:40
So when we preview it in the browser
we can see how the image is now wider.
2:47
But, I still see a 1.5
m gap on the left side.
2:52
Now I can remove the 1.5m padding
gap with a negative left margin.
2:57
So back in my image rule right
below the max-width declaration.
3:02
I'm going to add a margin-left property,
and
3:08
I'll set the value to -1.5em.
3:13
All right, so when I save the style
sheet and refresh the browser,
3:16
we can see how the main image takes
up the full width of its container.
3:20
While preserving the padding
around the text.
3:25
So it's that simple.
3:29
The image also remains flexible and
maintains its proportions no matter what.
3:30
So for instance if I go back to the style
sheet, and scroll up to the card
3:35
rule here, and if I change the card
containers width file to say 30%.
3:41
When I refresh the page,
3:47
notice how the image scales to
the width of the card container.
3:49
You need to sign up for Treehouse in order to download course files.
Sign up