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