Transcript from the "Width" Lesson
[00:00:00]
>> Jen Kramer: So, one of the things that, two more properties that all boxes have, of course, besides margin, padding, and border, is width and height. And, so, as we were just saying before the break, block-level HTML elements, their width by default is the width of their parent. Since we haven't set a width to our parent, these paragraphs and these divs are really, really big.
[00:00:24]
What if I wanted to make a smaller one? What if I wanted to make a smaller box? Those are absolutely possible. So, let's say here for box1, we'll go ahead and add a width to that.
>> Jen Kramer: All right, so once again widths are typically gonna be done in, in fact, the way I'd recommend you do your widths is probably more in percents.
[00:00:48]
And there's a reason for that, because as you add things up on the web page, it's easy to add things up to 100% when you're calculating widths of things going across web pages. You can absolutely do your widths, and ems, or rems, those are totally legitimate as well, you can totally do them that way also.
[00:01:07]
But let's just say, I wanna do a box width of about 25%. So that's a width of 25%, about a quarter of the page. And, you can see there, that's the way that looks. We could change the width of our box2, just to show you that rems work also, we can do that.
[00:01:26]
So, we could do a width of, let's say, I don't know, 10rem, how big is 10rem in pixels?
>> Speaker 2: 160.
>> Jen Kramer: 160 pixels, right? How many of you were bad at math and couldn't get that answer like that? Yeah, okay. So, there's a great website, and I've got it in your references, it's called PXtoEM.com.
[00:01:51]
And this is a calculator, [LAUGH] very handy calculator. So, you can simply put it in your rem or size. In this particular situation, if you use your base-16, the ems and the rems are exactly the same. So, if we said, I wanted to make a box that was 400 pixels wide, this would convert it for me to 25 ems, which is also the same as 25 rems.
[00:02:19]
And we could just go ahead and do that. So we could say, we want it to be 25 rems, and there's my box.