Height and Width

Quick reference

• 00:04 Ok so we've talked about margins and
• 00:07 padding and in this video, I want to talk about height and width.
• 00:10 So the margins deal with the area outside and
• 00:13 the padding deals with the area directly inside.
• 00:15 But you can actually set a hard height and width for any element you want.
• 00:19 So to do that you just type in height H-E-I-G-H-T,
• 00:24 spell it right and let's say we want 50 pixels.
• 00:28 And width, let's say we want 200 pixels.
• 00:32 Okay, save this, hit reload boom, just like that.
• 00:36 So we can change this to 200 and oops.
• 00:42 And a thousand, make it bigger.
• 00:44 So, the height and width deals with area inside of your padding area.
• 00:50 So if you wanted to then also put a padding, of say 50 pixels,
• 00:55 that sort of changes things, it makes it bigger.
• 00:58 Even though you've already designated a height and a width,
• 01:02 when you add padding or even margins it changes because,
• 01:05 like I said, the heighth and the width deal with inside the padding.
• 01:09 And we're gonna talk about the box model in a couple of videos from now and
• 01:13 it'll sort of clear up some of these things.
• 01:15 But just for right now know the height and width.
• 01:17 Let's get rid of this padding.
• 01:18 So we've hard coded in an exact number of pixels, 200 pixels.
• 01:23 You can also use percentages.
• 01:25 So we can go 100%.
• 01:27 The width is 100%, if we save that it goes to the entire 100% length of the screen.
• 01:32 And then so if we wanna go only half go 50% if we save that same thing.
• 01:39 So sometimes it's a good idea to use an exact pixel, when you know the exact
• 01:44 pixel, sometimes you don't know things are just free floating and
• 01:47 they grid together with other things, so you'll use percentages.
• 01:51 So another thing is, you can set the maximum width.
• 01:56 And to do that we just type in Max-Width and
• 02:00 let's say 30%.
• 02:04 Save this, hit reload.
• 02:06 Boom! It decreases it to 30%.
• 02:08 So, why would you use the max width?
• 02:10 Well, sometimes you are styling different things next to each other.
• 02:13 Sometimes you have a box here and a box here and a box here.
• 02:16 You want them to all equal a certain thing but not go over a certain thing and.
• 02:21 Sometimes it just a good idea to use the max width.
• 02:23 And you'll sort of know when that's appropriate.
• 02:26 Just like the other python width, we can also do percentages, or we can do pixels.
• 02:33 Sort of, see, 30 pixels, not very big.
• 02:35 But a lot of times a max width, you're going to use percentages, but
• 02:39 you may use pixels.
• 02:40 It just sort of depends.
• 02:42 Just remember, whenever you're using the height and
• 02:44 width, they do not take into account padding and margins.
• 02:47 So if you set a thing as the max width of 50 pixels for
• 02:51 instance, your element might end up being,
• 02:54 70 pixels because we've set a padding of 20, so 20 plus 50 is 70.
• 02:59 So, sort of keep that in mind when you are doing these things and
• 03:05 that's all for this video

Lesson notes are only available for subscribers.