Transcript from the "Auto Margins" Lesson
[00:00:00]
>> Jen Kramer: All right, let's do something else while we're here. I'm gonna go ahead and add to my article,
>> Jen Kramer: An article style. And this is a common technique that you can use on websites. Maybe you don't want your article to stretch all the way across the page here.
[00:00:21]
Okay, those people who out there who have worked in the print industry before, really, really hate the long lines that we get on the web. Books are the size that they are because our vision is only so wide right? It's actually really hard to read things that are this wide, because you get to the end of the line and you have to work really hard to go back to the next line to keep reading right?
[00:00:43]
So sometimes it's better to have a narrower webpage to keep your reading a little bit more efficient. So let's say that I wanna reduce the width of my article overall, right? Let's make this width, say, something like 25 rem, okay.
>> Jen Kramer: Just to see how that's working.
>> Jen Kramer: And I'll put a border on this too so we can see what we're doing, border 3 pixels solid red, okay.
[00:01:20]
>> Jen Kramer: So what suggestions do we have to center this whole thing on the page? Yeah.
>> Speaker 2: Could we use text-align?
>> Jen Kramer: We could try text-align, what should we put it on?
>> Speaker 2: Article.
>> Jen Kramer: On the article itself. Okay, so if we said text-align:center. Okay, so that's centered all the text inside of our article.
[00:01:46]
But it didn't send her the box on the page did it? Okay, what's something else we could try? Yeah, Jenna.
>> Speaker 2: Body.
>> Jen Kramer: Put it on the body tag? Okay body. You want to do text align center here.
>> Speaker 2: Only guess I got.
>> Jen Kramer: Okay? Well that also aligned the text in the article, but not the box itself.
[00:02:12]
Okay? So that's not going to work either.
>> Speaker 3: Something like block center or
>> Jen Kramer: There's something funky going on there right?
>> Speaker 3: Can't work with text anyway, I know that.
>> Jen Kramer: Yeah, it's not gonna work with the text. Here's the trick. Margin, okay. It's gonna be a margin thing, and we're gonna say the following, zero auto, and that will align the box in the center on the page.
[00:02:40]
So what does that mean, zero auto? We have two numbers here. This is also part of shorthand. So if we look at our shorthand, let's find the part with the two numbers. Here we go. So when we have two numbers, as it says here in your notes, one of the m's have padding to the top and the bottom and five m's of padding to the left and the right.
[00:03:07]
Okay? So when there's two numbers, the top, the first number is gonna be the top and bottom, the second number is gonna be left and right. So what we have here our code pen then is no padding or no margin in this case on the top and the bottom and auto on the left and the right.
[00:03:23]
And what auto tells the browser is, calculate how much extra space we have, divide it in two and stick half on each side of this box.
>> Speaker 2: So it would be centered on any device?
>> Jen Kramer: So it would be centered on any device. See as I make the screen smaller, it's staying centered, that's your browser doing math
[00:03:46]
>> Jen Kramer: Okay, that is a very cool trick. And I know some of you really wanted it yesterday for your book chapters. Okay? So that's how we can center that on the page.