1
00:00:00,400 --> 00:00:04,650
Okay, so now you're going to learn
how to display full width elements

2
00:00:04,650 --> 00:00:07,520
when placed inside padded containers.

3
00:00:07,520 --> 00:00:10,190
Normally when you apply
padding to a container,

4
00:00:10,190 --> 00:00:13,340
the padding creates white
space around its content.

5
00:00:13,340 --> 00:00:17,900
It pushes content like images,
paragraphs, and headings inwards.

6
00:00:17,900 --> 00:00:21,920
Sometimes you don't want padding to
effect all the elements in a container.

7
00:00:21,920 --> 00:00:25,600
For instance, you might want white
space around the text only, but

8
00:00:25,600 --> 00:00:28,760
no space around an image above the texts.

9
00:00:28,760 --> 00:00:32,030
Now there are several methods you can
use to get around the padding and

10
00:00:32,030 --> 00:00:34,220
it usually involves a little bit of math.

11
00:00:34,220 --> 00:00:38,370
And the math gets trickier when you don't
know the exact width of the container

12
00:00:38,370 --> 00:00:39,680
because it's fluid.

13
00:00:39,680 --> 00:00:43,080
So let's see how Calc can
help us figure this out.

14
00:00:43,080 --> 00:00:47,550
You can follow along in workspaces by
clicking the Launch Workspace button

15
00:00:47,550 --> 00:00:48,900
on this page.

16
00:00:48,900 --> 00:00:54,550
So in the workspace, the index.html
file contains a div container

17
00:00:54,550 --> 00:01:00,570
with the class card, and inside card
we have a heading and two paragraphs.

18
00:01:00,570 --> 00:01:03,630
Now when we preview this
page in the browser,

19
00:01:03,630 --> 00:01:09,550
notice how the card container has
padding on the left and right sides.

20
00:01:09,550 --> 00:01:12,920
The padding adds extra white
space around the text.

21
00:01:12,920 --> 00:01:16,870
So now I want to add an image
inside this container.

22
00:01:16,870 --> 00:01:20,900
Back in my Index.html file
inside the card container,

23
00:01:20,900 --> 00:01:26,420
right about the h3 element,
I'm going to add an image element.

24
00:01:26,420 --> 00:01:33,900
And I want to add this mountians.jpg
image inside the card container.

25
00:01:33,900 --> 00:01:38,454
So as the source value I'm
going to type mountians.jpg.

26
00:01:40,870 --> 00:01:45,050
Then I'm going to open
up my style.css file and

27
00:01:45,050 --> 00:01:49,560
scroll down to this Calc Styles
comment section here.

28
00:01:49,560 --> 00:01:53,890
So right below the comment,
I'm going to target the image element

29
00:01:55,410 --> 00:02:00,170
and give it a max width of 100%.

30
00:02:00,170 --> 00:02:04,980
So when we view it in the browser,
the padding on the left and right sides of

31
00:02:04,980 --> 00:02:10,350
the card container creates a gap on
the left and right sides of the image.

32
00:02:10,350 --> 00:02:14,520
Now I want the image to be the full
width of its card container.

33
00:02:14,520 --> 00:02:16,060
That would look much nicer.

34
00:02:16,060 --> 00:02:21,440
So, we can take advantage of the calc
function to get around this padding issue.

35
00:02:21,440 --> 00:02:22,500
Back in the image rule,

36
00:02:22,500 --> 00:02:27,050
I'm going to change the max-width
value to a calc function.

37
00:02:27,050 --> 00:02:31,861
So I'll type calc, and as the expression,

38
00:02:31,861 --> 00:02:35,927
I'm going to type 100% + 3em.

39
00:02:35,927 --> 00:02:40,380
Adding 3em to the total width
of the image makes up for

40
00:02:40,380 --> 00:02:46,190
the 1.5em padding on the left and
right sides of the card container.

41
00:02:47,350 --> 00:02:52,240
So when we preview it in the browser
we can see how the image is now wider.

42
00:02:52,240 --> 00:02:57,120
But, I still see a 1.5
m gap on the left side.

43
00:02:57,120 --> 00:03:02,600
Now I can remove the 1.5m padding
gap with a negative left margin.

44
00:03:02,600 --> 00:03:07,100
So back in my image rule right
below the max-width declaration.

45
00:03:08,350 --> 00:03:13,121
I'm going to add a margin-left property,
and

46
00:03:13,121 --> 00:03:16,707
I'll set the value to -1.5em.

47
00:03:16,707 --> 00:03:20,851
All right, so when I save the style
sheet and refresh the browser,

48
00:03:20,851 --> 00:03:25,580
we can see how the main image takes
up the full width of its container.

49
00:03:25,580 --> 00:03:29,080
While preserving the padding
around the text.

50
00:03:29,080 --> 00:03:30,900
So it's that simple.

51
00:03:30,900 --> 00:03:35,730
The image also remains flexible and
maintains its proportions no matter what.

52
00:03:35,730 --> 00:03:41,100
So for instance if I go back to the style
sheet, and scroll up to the card

53
00:03:41,100 --> 00:03:47,740
rule here, and if I change the card
containers width file to say 30%.

54
00:03:47,740 --> 00:03:49,504
When I refresh the page,

55
00:03:49,504 --> 00:03:53,963
notice how the image scales to
the width of the card container.