The Box Model and Image Sizing Techniques

Let's continue exploring the box model and sizing things. For this exercise, we're going to switch to a new folder here, the hipstered box model folder. Here I've got an SVG, scalable vector graphic version of our logo.

A little hard to see here on the dark background, but here it does say hipstered. These checkerboard patterns in the background indicate that it's transparent, so we'll be able to see through to the white of the page. This will stand out nice once we put on the white background.

This is basically all the code that was done in the previous exercises, but let's just remind ourselves of what we're looking at here. We've got the header placeholder text where we're going to put in the logo up there, and we've already styled the rest of the page with our fonts. While we have set the size of the main area here, the copyright is kind of hanging all the way over there on the left, and we really haven't addressed that yet, so we've got a couple things to fix up here.

We're going to start by doing the header. So going here, this was just some placeholder, and in place of that we're going to put the real content, which is an image, and that is in our images folder. So I need to go into the images folder and grab that SVG file there.

The image says hipstered, so I'm just going to copy and paste that alternate text and preview this in my browser, and there we have that that image. Now I'm going to zoom in a little bit on this. I'm just hitting in my browser, hitting command plus or minus to zoom in and out, CTRL PLUS (+) or minus on Windows, and that actually shows up here in Chrome as a zoom.

If you click on that, you can always hit reset, or for the keyboard shortcut, right next to the plus and minus, you've got zero. So command plus to zoom in, command zero to go back to 100 percent, CTRL PLUS (+) on Windows, or control zero to go back to normal size. But I'm going to zoom in here so we can see this a little bit better.

Now when it comes to the sizing of this image, it came in at the size that the image was created at, and if I look at that down at the bottom, it's 105 × 35. So this part right here says the width by the height. I could, if I want to, put in here width 105, right, because that was 105, yeah, and by 35 height, and then say height equals 35.

You don't put pixels or anything with something like width and height. It's either pixels or percent. You could put percent if you wanted to, but we're doing pixel dimensions here.

If I do that, there won't be any visible difference here, really, in the file itself. It's the same. So you might ask, why would I do this? Technically, it will load potentially a little bit faster as the page is downloading.

The loading process might be different. In the end, once everything is loaded, it'll end up looking the same, but it's during that downloading process that something might look a little bit nicer or go a little bit faster with the width and height being coded. If you don't have time to do this, if you're rushing, you don't have to do it.

It's not a requirement, but what are ways that that might make a difference? So let me preview this in Safari, which I know does this, and let's say I go into my inspect element here, and I'm going to make these bigger so we can see this better here, and I'm also going to zoom in on this page here. So let's say I go in here and I edit the HTML. There we go.

I'm going to break this link. I'm going to put in S, and does that break it? No, I'm going to actually break it in VS Code here. I'm going to save it there.

So that should no longer work, and I'm going to open this up in Safari here. Yeah, okay. Now notice how Safari reserves the correct amount of space because I put in the width and height.

It shows the alternate text in that space, but it has reserved that space because even though it hasn't downloaded the image, we've told it through code how much space to reserve. If we don't have a width and height, let's say I cut that, now it doesn't know how much space to reserve, so now it's going to be whatever size the alternate text is. So while this may be very similarly sized in this case, if you had a much more substantially large image, what would happen is let's say you're waiting for that page to load.

It's going to reserve just a teeny little bit of space here just for the ALT text, and then once that image loads, everything else would be pushed down the page. That might not sound like much, but as you're loading a lot of images, you can imagine somebody starting to scroll down before all the images have loaded, and maybe they're down here on the page, and then images start to load, and they keep pushing content further and further down because it's making more and more space up here. So the thing that you're trying to look at might be scrolling down off the top of your screen as you're trying to watch it because other things are loading up above.

If something is not going to change in size, if it doesn't need to be flexible, putting on the width and height can make a minor bit of difference in terms of the loading. I'm not saying this is earth-shattering by any means, so if you don't have time, if you're having to do something really quick, it's not essential. In the end, it will look exactly the same.

But for images that don't need to change, and in this case this logo does not need to change in size, it could be a little bit of a nicer loading experience if we have that. Now for something like this, you know, let's imagine that there was not a background image. Maybe this was just a regular image.

For something that scales up and down, because it needs to be scalable, there's no need to put in the width and height for those, because you're going to be overriding it anyway, having it scale up or down to fill, let's say, 100% of the available area. So this is really only appropriate for images that don't change in size, like something like this logo. Okay, now looking a little closer here, notice there's a little extra space and this image does not have that space in it.

So there is extra space somehow there. So the question is how? And if we're using our dev tools to try to figure this out, we can look around and we're not really going to find it. We've been used to this computed area here with the size of the element, padding, border, margin, and this has been helpful for finding padding and margin, but this issue is not a padding or margin thing, because this image has no padding or margin.

And notice when I hover over there, watch that there's some white space down below it. See, so we know the image is that size, the size of the blue. There's no space, there's no margin, there's no padding, and it's not in the image itself, so there's white space below it.

But the header, it doesn't have any padding margin, so it seems to be this mysterious space. Like what is causing that? So this is a different issue that we haven't seen before, and it's caused because this image is displayed as an inline element. So inline elements are vertically aligned, right, up and down, vertically aligned to the baseline of other text.

Now keep in mind that an image is inline, so if there's a G or a Y or a J, those have descenders. Compared to an X, the bottom parts of those letters, they descend below the baseline of the X. And so when we look at this, notice how they occupy this kind of lower space. See how they descend below the bottom of the image? And notice how the image is more aligned with the X, right? So here, notice how the bottom of the image is aligned with the bottom of the X. That's what we call the baseline of text.

If you're not familiar with baseline in type, let's find an image here. Yeah, so let's look at this. So here, those are descenders that go down below, and the baseline is what the things sit on as their base.

But some things descend below that. So the space that we're seeing is this actual space below the baseline from the bottom of the baseline to the descender part. So that is space reserved because it's inline.

There's a couple fixes. One would be to display it as a block instead of inline. That would be one fix.

Or the issue is actually that the vertical alignment is not what we want. We don't want vertically aligned to the baseline. We want images to be aligned vertically to the bottom.

We can do this in our CSS. We could take care of this. All images, and I don't have a rule for all images, so I'm just going to come up here and say all images, the vertical line should be not baseline.

It should be the bottom. This is a good thing that you could put into basically every web page you ever do. And this takes care of that space.

And just so you can see it, see there it's aligned to the baseline. There it's aligned to the bottom. And now it does not have that weird spacing issue.

All right. Now I do want to add some space all the way around that image. So I'm going to put padding on the header because I'm also going to have some navigation over here.

So everything in the header should not quite touch the edge of the page. We need to make a rule for the header. And let's say I'll go down here to my sections.

And let's make a rule for header to add some 20 pixels of padding for that. And now we have a consistent amount of space here all the way around without that little extra space that would have been created if we had not removed it. All right.

So that takes care of that issue. Moving down to the bottom here, I want to put a background color on the footer. All right.

So this is the footer tag here. And so I'm going go down and I've got the header, the hero, and the main, and then down here the footer. And I want to have a background color for this.

And our background color is going to be this hex code right here. It's kind of light brown tan color. Now we've got some color there.

I don't want my text to be right up against the edge. So I'm going to put some padding on it. And we're going to keep using that same 20 pixels of padding.

So I could say padding 20 pixels like so. Be consistent with the heading up above. Now looking at this, that does not look like an even 20 visually.

Look at all that extra spaces down below. And when I select the footer, it is doing the green space there, which is the padding. It is doing the even 20 pixels.

That is correct. My problem is the paragraph that has 20 pixels of bottom margin. Because all of my paragraphs, like all of these, these all have 20 pixels below those, which is appropriate.

It's just in the footer I don't want paragraphs to have bottom margin of 20. So I'm going to need to make a new rule here for in the footer find paragraphs and set the margin. And we could say margin specifically bottom, but what if we ever add top margin or something? We could just say I don't want any margins.

Just get rid of them. Simpler than saying margin bottom. We don't have to be that explicit.

Also the text is a little bit big, so we're going to make it a little bit smaller while we're at it. We'll just make it 12 pixels. No, actually no, that's going to be a little small.

15 pixels. Okay. Now it's a little smaller.

It does not have the extra margin there. It's just that the footer has the padding around it. That looks better.

Okay. Now I'm going to close up my DevTools here. Let's look at the page as a whole.

I like that the hero goes edge to edge. I like that. I like that the text does not get too wide and that it's centered in the page.

But when it does get smaller, it has some padding around it. So those areas are looking good. But this original image, it was not super high resolution.

If I look at this original hero, this is only 1280 pixels wide. Now maybe if I could have gotten a bigger image originally, I could have made it more pixels, which would have extra detail. But as it is right now, this is being scaled up from 1280 pixels up to probably my screen is about 1700 pixels or so.

So it's starting to become a little bit pixelated. And what if we don't want this to always go edge to edge, even on big screens? Because if you stretch this really big on a big screen, it could get very pixelated. Also, like down here in the footer, do I want the footer to go edge to edge all the time? We need to talk about the idea of wrappers around our content.

And what do we wrap our wrappers around? So for example, here, I've got the main area here. And the main tag is basically like a wrapper. But I could wrap the entire page in something and give it a width to limit how wide the things get.

I do have a wrapper of sorts already on the whole page. And I have that body tag, like everything in the body. Because it's in the body tag, I could put a width on the body tag.

But let's say I don't want to do the same width on everything. Maybe I want to do some parts that go the whole way across and some parts that don't. So I'm going to use a div tag to do this.

There's not a different special tag that's appropriate, one of the semantic tags. So whenever you're just doing something to kind of generically divide up your content into different chunks, and there's no semantic kind of more meaningful tag, divs are fine to use. There's nothing wrong with using a div, unless there's a better tag that's more appropriate to use.

So divs are perfectly fine. And so I'm going to start this right under the body. I'm going to start it here.

And I'm going to end it at the very end, right before the end of the body. So this is the only thing inside the body right now. Everything is inside this div.

And I'm going to give this either a class or an ID. Now, normally speaking, classes are recommended. Just because we haven't done many things with IDs, I'm going to talk about the difference between IDs and classes again.

In general, if you could just avoid IDs, if you don't need to use them, just go with classes, it's going to be safer. But let me show you why. I'm going to give you an illustration of it.

The time we have to use IDs are for things like linking up and down the page, which we saw in a previous exercise. That was a requirement of why we needed IDs. Also, form elements.

You need labels for a certain thing, and that thing needs an ID, because it needs to refer to a specific thing. But when it comes to CSS, we don't have to use IDs. We could use classes instead.

So let's see what the issue might be to illustrate this. Okay. So let's say there's only one of these.

You're like, I only need one wrapper. I'm sure of it. Famous last words.

Because when you use an ID, you can never use the term wrapper ever again. You can only use once. But you're like, oh, but I only have one.

I'll be fine. Okay. So let's give this a rule.

We're going to say hashtag wrapper, because IDs use hashtag. And I'm going to set a max width of, I'm going to go a little bit smaller here. We can always make this bigger later.

But let's say 1100 pixels. So that's going to limit how wide everything in the page can get. So nothing can get more than 1100 pixels now.

Nothing. The footer can't. The hero can't.

Nothing can. So all of this stuff over here is just empty space. Now, it can get smaller, because we set a max width.

It just can't get bigger than this. Okay. Now, if we want to center it, we can use auto margins.

Because I don't know exactly in pixel dimensions how much is going to be on the left, how much is going to be on the right. So I can't type in a pixel amount. I just have to say let it automatically balance the left and right.

And now that is centered. If it's a smaller screen, less than 1100 pixels, then it'll look like this. Then it can go up to a maximum width of 1100 pixels, and then it goes centered.

And if you like containing this, then that might work well. But the thing is right now, I've done this to the entire page, which means the footer gets caught up in this, and the hero, and everything. Then I have everything.

What if I want the footer to always go edge to edge, and I only want to limit the width of these things? Well, I could do that. I could say, well, let's not end the div after the footer. Let's end it up here.

We end the wrapper before the footer. Now the footer is not caught up in that. Now the footer can go edge to edge, and I just limit the width of everything else.

But what if I want maybe the hero to also go edge to edge? You might need different wrappers for different parts. So for example, maybe I'm fine with the top part being limited, because I like that it looks like this on small screens. I don't want the image to become too pixelated.

So I would actually probably make this the same as the image. So the image is 1280. So I'd make the max width of this 1280.

So it can go up to the size of the image. So it could be smaller than the image, the native size of the image, up to 1280. So let's say I like that.

But then looking at the footer, I like that the footer color goes edge to edge, but I don't like that the content goes edge to edge. I'd kind of like that content to come in and be limited, so that if all of this stuff kind of starts and ends here, I'd like it to have the same width as what I've done up above. Essentially here, if I inspect this and I put the dev tools here down at the bottom, just so I can see the full width here, if this is the width of all the stuff up above, the wrapper, I would like the paragraph in here to be the same width as the blue area above.

The footer is the thing that has the color. So I don't want to limit the footer. I want to limit the stuff in the footer.

So it needs a wrapper around the stuff inside the footer. And I may as well use the same wrapper as I did up here. So I can use it once here and I could use it again here.

The only problem is, oh, I made it an ID. I can't reuse that. See, this is why I shouldn't have made it an ID.

Why limit yourself? You might think you only need it once, but you might need it again. And because of how specific they are, they're hard to override them in CSS because they're so specific. An ID gives you a score of a hundred.

That's, that's equivalent to 10 classes. So I'm going to switch this to a class, which I should have used to begin with. This is part of why we're showing this is because for the most part, when it just comes to CSS, avoid IDs, unless you have to use IDs, but just for CSS, just use classes instead.

If you get a choice between ID or class, when it comes to purely CSS, just use a class. And now of course I need to go here and change this to a period now that it's a class as well, but now I get to reuse this. I can have this main wrapper, but then I can also wrap this in a div as well.

So I'm going to hit shift tab to outdent that. And I'm going to wrap this with option W as in wrap or ALT W on windows. I'm going to wrap it in a div and I'm going to add a class of wrapper, which I can reuse because it's a class and you can use classes over and over again.

If it was an ID, no, no, no. You can only use it once per page. Can't reuse it.

Now here, now notice how that is now limited the width and it's the stuff in the footer. The footer can still go edge to edge, right? That's why we kept it outside of a wrapper. It can still go edge to edge, but the stuff that's in the footer, that is limited to the same max width as the stuff up above.

So you might need different wrappers to be reused, kind of the same wrapper to be reused over and over again. So you can't always just get away with just one wrapper for your whole page. Go ahead and do exercise 5c so you can try this out yourself.