Ladies and gentlemen, this is the drunken UX Podcast. I’m glad that you have joined us this morning or this afternoon or this evening, or yesterday morning or even tomorrow in the afternoon. I don’t know. I’m not the boss of you. I’m just your host, Michael Fienen.

So it’s quantum recording. Yeah, we’ve we’re trying out some new stuff. Yeah. This week, we’re going to be talking about the box model, the CSS box model, the biggest box model, whether it’s cardboard, or corrugated, or maybe plastic, whatever, like, I don’t judge, all boxes are beautiful. Let them all go down the runway. That got really weird.

Yeah, we’re gonna be talking about sizing and spacing and how things work. And I know that sounds to maybe some of you like, why are you talking about something so basic, because you know what, everybody’s at a different place in their journey. So we wanted to sit down and get down to this plus, even I learned something while I was researching this episode. And if that doesn’t tell you something, then I’m an idiot.

But it’s better now.

It’s better, it has improved. We have cleaned things up. And we’re going to show you how to clean things up by using this. And you could ask,

There, there is a an opening in the notes for it. If you want to jump in there. And just this light could yield anything. You could learn how to center a div here. You could learn how to center it and then you have to find something

The mobile Safari mobile Safari is my hell right now. So oh, I won’t go into I just understand that mobile Safari is the new IE. Six. My life is awful. Hey, everybody, I am I said your host. I’m Michael Fienen. That’s Aaron Hill. If you’re new to the show, I hope you stick around. We’re gonna have some fun tonight.

We always kick off every single episode by talking a little bit about how the drunk and applies to the drunk in UX by having a drink. Aaron, I need you to go first.

Oh, that’s right. I’m sorry.

Jesus. Got mine. Unknown Speaker Boy. Yeah. I did. Good.

Man. I was really hoping you were drinking because I’m about to tell you what I’m drinking.

I’m gonna I just have to rip the band aid off and see how you react to this. So is it the rocks? I’m not sketching it up. I’m not fancy boy in any way, shape or form. So Christmas. I was experimenting with some stuff. And I bought my wife and I are at Christmas present. And it’s called a Sodastream. Have you heard of these? If one of them Yeah, yeah, I drink a lot of water. I’m trying to be a healthy boy on top of everything.

And so I I like soda more for the mouthfeel so yeah, I mean, I don’t I don’t need this the pop like, in fact, frequently I’ll grab a Pepsi or something. And it’s like anymore. I drink so much water. It’s like ooh, this is like thick. It’s a thick boy. I don’t know why I keep making this joke, but I’m doing it. I’m a joke boy.

So I bought a SodaStream and I’ve got a bunch of like I was using the flavor squirters you know, just with like a glass of water and your flavor squirt or zero calories, tons of cancer. So I got the Sodastream you can see myself SodaStream it’s a liter liter bottle, you can see my orange is a nice orange flavor.

and a lot of rum. That’s cool. I was like,

I’m like, it’s almost like just doing like orange soda and rum. And that’s fine. Like, what if I put rum in my water and put it in the Sodastream and carbonate? So I’m like, I don’t know if this is like, I don’t know how I should feel about this. All I know is it’s not that.

yeah, it is absolutely not bad. So that’s what I’m doing. I, man, I don’t know. I got strange.

Oh, no, I just mixed it all and then put it in there and let the carbonation mix.

Oh, that clean it though. Wipe it off. Because I mean, it feels weird to like, put stuff in a bottle of carbonation and then shake it up like that feels.

that’s just like me, I get agitated people rock me back and forth. So I’m on fire tonight. I’m a fire boy. God, this is gonna go on all night. Let’s get into this. Let’s just jump in. I jumped in the pool, um, up to my ankles, the box model. Now this is something if you’ve worked with CSS long enough design, obviously, these words will mean something to you. They may not mean a lot, or they may. Like I I frequently asked this is like a good question.

I usually ask like an associate developer, a junior developer from interviewing it’s, this is one of those things where I just want to see how your brain works. And I’ll ask the question of describe the box model to me. It just it demonstrates kind of you know what you think about how you know how you artic articulate a concept? Yeah. And things like that. The way I tend to this is like literally my definition.

That’s not You’re not going to find it written anywhere. I tend to say it’s the representation of a DOM element size, inclusive of the content, padding, border, and margin with an asterisk, because the margin is generally not part of the size, but it is considered part of the box model like the it’s part of the model, not the box thereby. Oh,

Yeah, it’s not really a spec. It’s a collection of specs. And it’s a name we’ve given that collection of specs.

Yeah, like you don’t set there’s no CSS property right? You don’t let box you kind of do. But it but you don’t call that.

Yeah, it’s it’s it’s not Macbeth. Macbeth applied a podcast recording Oh, shit. Well, as a Oh, you don’t know that? Nevermind. No, I can’t I I’ll tell you afterwards. It’s a theatre thing.

like wishing somebody good luck. Backstage, I got a taboo. It’s a board game. So we let’s let’s step back just for a second, right? And think about boxes and think about websites and elements, right? When you think of a web page, right? Every single item on that page is a box. It’s a rectangle in some form. Even if it’s path clipped, even if it’s border radius, in its base form. Web pages only understand the concept of rectangles,

goes back, you know, years and years and years and even though like because we have the ability now to draw a circle with CSS, you know, using a polygon things like that, like we have these different abilities now. But the only way we really have as a designer developer now to articulate an item in space is with X and Y coordinates basically.

did that is part of it? But you also have to include this. I mean, the size is really like, Yeah, well, I mean, that’s like that’s the meat.

Yeah. Radio Button. Good example, right? Radio Button something round, right. But if you open up your inspector, and you hover over that element, what do you see? Yeah, see a square, two rectangles, whatever you whatever size you made it. So we speak in squares, we speak in rectangles, rectangles, squares are rectangles, rectangles, not always lawyers.

So the way I tend to talk about web pages is if you think about it, like you’re building sort of, you know, with two dimensional Lego blocks, basically, you know, the entire page can be broken down into a series of these, the horizontal and vertical lines, in different places that just carve it up into ultimately blocks.

That’s my Neria box could overlap.

Yes. I think like a Photoshop layer almost Yeah, or something like that, like, you have these sort of non dimensional layers that you can work with, like your Z index can be 1000. You know, increments deep. But that doesn’t actually produce thickness, so to speak, you know, there’s no, there’s no actual dimensionality that takes place. But we do have this ability now to layer. And so and that’s actually key, right?

Cuz I say, it feels like in the base concept, when you say we can only work in rectangles. It’s like then the how do we get even remotely close to doing the things we do? And it’s like, yeah, Legos are just bricks and blocks. And yet, you can build a Millennium Falcon out of it. Or a double decker couch. There’s more spaceship. Wait, the Millennium Falcon is a spaceship? I? I zolfo.

This is this is a weird, weird episode. We are 10 minutes in. So but yeah, like, we discovered that, yes, a block in its base form is a rectangle. But we can do so much to manipulate those blocks that we can now do incredibly powerful things. Most of that is at its base level, empowered by how the box model works,

get with some of these like starter kind of concepts, right? Because you can’t just jump in the understanding box model without sort of understanding the things that make it be

before they have width and height, they have display. Right? Display is important because it controls width and height. So so we have right, whenever you see the CSS elements, or sorry, the elements and the CSS properties on them, you’ll generally identify two very quick properties for display. Now there are more we’ll talk about those. But what are what are those two base,

inline and block, Enter. And also so and we sort of have like a pseudo abstraction of those two, right, we can do inline block, right, which is a combination of the two effects like it is literally, both of them together. So it behaves like both of them together.

right? And there are a lot of each of these, they’re both anonymous wrappers. Now, there are some other display types. You have display table display, flex display grid, obviously. We’ll talk about those in a second and how they fit in. At its base, though a block is either inline or block literally, and these are what we consider outer types.

They define the actual, you know, essence of that block. Table flex grid are considered inner types, they define the way blocks behave inside of another block.

to note that anytime you use one of those custom inner types, its parent

Right? So yeah, and so you hit on it, right? When when you set the start that like, oh, they have height and width, and I was like, well, sometimes they don’t behave the same. So I mean,

Yes, that is true. It does have an intrinsic height and width, right? That comes from just being in line, right? So a block if your display block, this is going to be things like most commonly a Heading Tag h1 through h6, divs, p tags, section tags, Article tags, you know, these sort of abstract, sectioning tags, technically the body tag to I think the body tag is technically block level. Yes.

And there are certainly set quite a few more than that, too. But these are the ones that are by default in most browser stylesheets. Those will display block some of the qualities of that are a they will extend into space. With wise, width wise. Yes. And so they generally will default to 100%. Width of their parent.

Yes. Yeah. And they will also clear each other. Yes. So even if you have it’s, let’s explain what that means. Yeah, so let’s say I have two divs. display block, and I’ve said your 40% width, one after the other. Even though 40 plus 40 is 80. They will be one on top of the other, not one beside each other, they will clear clearing means it will come after it.

Could you do that for me just one more time though. Typewriter boy. So yeah, and to be very specific, and this is where things get a little fun. And where you know, I can take a little deeper dive on this, that whole thing about like a block level element will extend in the space is only true when you have positioned it statically or relatively. It is not true if it is positioned. Absolutely. In which case it will use Max content as its width.

agree. When something gets positioned, absolutely, it loses sense of the space around it, it doesn’t know how much room there is anymore. Positioning something absolutely, basically removes any context that it can have about the space that can fill

which can send it off the page, right on it very unintentionally, like that’s Yeah. Right. So that’s just something to remember. I will let me just because I brought it up. So static versus relative, do you know the difference between static and relative

Well, you can do so you can say position static, you can say position relative. How does that affect?

Yeah. And so if you’ve positioned it statically, that that’s that is pretty much the only important difference between those is static, doesn’t understand top left, bottom, right, right, as a positioning, rule relative does, but it will otherwise follow all the other rules, it’ll be 100%. Width, if you don’t define it, it will honor any height and width, you give to it any padding margining, all of that, it will otherwise behave entirely like a block.

better better tools.

You make me think, though, because and the earlier you said it will be center div. You know, I mentioned earlier, you know, we had the only way we could really think about Web was X and Y, and then bring up Z index, right? Like that’s yeah, that’s the third corner of the triangle now. So I that maybe is obvious and goes without saying, but I thought it was would make for a good just kind of tie in point there that is having Z index ability now and layering.

Is that then third dimension that we have missed? Yeah, even though I said earlier, like there’s no dimensionality there’s physical depth to it. Obviously. It’s right. It’s digital flat depth kind of thinking. So okay, so that’s, that’s block level, in line right? In line most often applies to anything that wraps some kind of text, usually, yeah,

or a anchor tags. Yeah, you know, tags frequently are in there. So anything that’s like, generally meant to be in line, right? Like, it’s not common that you have things that are in line, but blocked, but there is a selector for that or property for that.

Now, the important thing to mention and you you’ve hit on it already, right? inline elements will honor their padding, they will push out, it’s a good way to like, if you want some space around something clickable like a link, it’s a good way to do that, you can give it enough padding, that it would blow out of its line height, right? The line height being you know, however tall your text line is.

But the one thing about an inline element is it will not push anything around it. It has no sense of right. Overlapping I mean, it will overlap, obviously, but it’s not gonna like push anything out of the way so that you have space because it doesn’t understand collisions. Now, it also doesn’t understand margins vertically, though, it will respect them horizontally.

Imagine putting your finger like right in the psyche, like it’s a drawing and you put your finger right in the center of it. Yeah, you’re holding it there. And anything you do is going to happen out from that. Yeah, but you’re physically holding it in place. It cannot move. Right? Now, inline block is where this changes inline block lets you do both.

So if you declare something as inline block, like let’s say you put a button inside of a p tag, you know, in the middle of a paragraph of text, and it’s set to inline block, then it will honor height and width and it will push things around it. But it will also try to maintain the content flow.

Yeah. And really, you know, I say like, Oh, if it’s in the middle of a paragraph, it’ll do funky stuff. The reality is you don’t usually do inline block inside of something like a paragraph of text. It’s more often useful for things like list items, or you making a navigation and you want your list items to floor flow horizontally. And, but also maintain a large hitbox.

You know, inline block lets you have a line of blocks. And yes, which can be very useful. Buttons are good for that too. But in that, you know, you see it used in abstract with itself, I see a

did mention there were some other display types, table flex grid, these are inner display types, we’re not going to go into the now because talking about things like grid and flex will be an entire subject unto themselves. Yeah, that’s a much more complicated topic, but but just understand that just because they are display types doesn’t change the fact that the display types of block inline and to a lesser extent inline block are your primary determinants.

And that by setting something to table flex or grid, you are intrinsically telling the parent that it is a block element, right that point.

So spacing, let’s talk spacing. Spacing is the next component of this spacing is terrible. Agreed. But no, I mean, the spacing is terrible in greed in in just in general. No space works terrible.

No, it’s a it’s a pneumatic device. It’s powered by air. Yes. The air that comes out of my mouth hole. It’s it’s a pneumonic device. Oh, RBL. Terrible. Okay, if you’re ever wondering, so anytime you ever have you ever seen like, you know, somebody declares padding, or margin, and it’ll be like padding? 02 Ram 03 Ram.

And they will be prioritized above a general.

they apply in terrible order T RBL. Top Right, right, bottom left, so like you’re going around the face of a clock, right, top right, bottom left, and you can leave one off, but off the end. So if you just say, one. So if it’s padding, five pixels, then it’s gonna say cool five pixels to everything. But if you say five pixels, 10 pixels, it’s gonna by five pixels to the top and bottom and 10 to the left and right.

Yes, it always will fill all four sides based on what you’ve given it. So if we were to say, five pixels, 10 pixels, 10 pixels, that we taught what I’ve bought a lot of pixel top, pencil top, right? Yes. Pixel bottom? Yes. What will our left be?

Yes. So yeah, you would have you would end up with five top 10. Right. 10, bottom, and 10 left. Yeah, let’s say like, this is not the best way to do this. But let’s say you wanted to just have 10 pixels on the left. But nothing else. Yeah. So what would the shorthand for that be?

Well, okay, but do it do it as a shorthand though, specifically?

Yes. Yeah. So yeah, but you’re also right. You could also just say padding zero, and then do padding left 10 pixels. Yeah, that looks I say the dash left will be prioritized over the generalized zero in that situation. But this applies to padding and applies to margins, you can do with borders. Pretty much anything that takes the four cardinal directions. So that’s step one on spacing.

So there are three components to spacing that you have to consider. One is borders.

Yeah, yeah, it was a weird thing. Like you would have this perfect design site. And and then you voted IECEx. And it just falls to pieces. Because the IECEx box model decided to calculate width and height differently than the standard box mode.

It the issue that was an IE six was that it by default, and we’ll talk about this in a second, it defaulted to border box for everything. And you could not unset you could not control it. There was no I didn’t accept any other value. So like the witches waiver, it was a different from everything. And it was not well understood at the time.

opposite. There’s a problem with Yeah, the problem with the other way, because if you said it’s, it’s 100. So we’re jumping ahead a little bit here. But yeah, well, let’s just Yeah, yeah, let’s let’s talk about Yeah, let’s save this. And when we get into the actual box model, we’ll explain why it was the way it was. So with borders, borders exist between padding and margin, right.

They are the no man’s land, they are the neutral zone. They are the DMZ literally a border. They are well, I mean, if you want to get technical. Are you a technical boy? I didn’t think so. No. So but they are part of the box. Right? They are between padding and margin, but they are part of the box margin is not.

And how big are the boxes? 100 pixels? 100 pixels wide? So you would have to have a 208 pixel column? Yes. Because by default, it’s additive. So you have 100 pixels wide, 100 pixels wide. And then

that’s a common mistake people make. Yeah, you have to add it twice. And since we’re doing since you said two boxes, it’s times four. So keep that in mind as we talk about this. But so borders are simple, though.

Yeah, no, this is why I mean, it’s still like this is still a thing. Like it’s still, this is why

There. And the reason why this is so much simpler now for what it’s worth, as we’ll get to this here in a second is that we buy the most part we default to is called the alternative box model. And that’s what makes this much easier. Right? But that came later. So then you have padding padding is the next component of spacing. padding is easy padding is just this distance between your content and the boardroom. Right so it’s just it’s whitespace thing. You know,

Yes. It’s not bad with a little garlic mixed in with it as well. But also it is outside an element.

So and in a good way, like we can meet space this a little bit here. So if you think about it, like if you built your house, right, yeah. And you put a fence around your house, that’s your border, the house is your content, right the house is the thing that you want people to pay attention to. The fence you put around your house, is your corridor goes around, literally a border, the padding is your yard.

That’s the space between your house and the fence, you can have a big yard, you can have a tiny yard, you can live in Boston, and all you have is a wrought iron gate with some dead plants between it and your brownstone.

then then you have your road verge. Right. And the road Verge is what is between your

It’s the road. It’s the road verge. I don’t even know what else to call it. Is there another word for

it’s no it’s what’s between the sidewalk in the road. Right? That little strip of grass.

That’s the margin. And so that could be big or small or whatever. But it’s the buffer that keeps your fence your area away from area that’s not yours, the road, you don’t want to be in the road being in the roads bad. Like that’s where other stuff goes. Right. So that’s actually that is literally the best metaphor I’ve done today. And I’ve done some really shitty metaphors today. That one actually works, I’m sticking with that.

Yeah, you could bring the fence and closer to your house, maybe you actually have some yard between the sidewalk and the fence, though it’s yours. But you don’t want the fence there. Maybe you

Now there is one really kind of cool, semi complicated concept that is worth mentioning here, which is margin collapsing.

you know what I’m talking about,

way of doing it. Let me give you let me give you the definition, this is from MDN. Just because I’m feeling lazy at this point. If you have two elements whose margins touch and both margins are positive, those margins will combine to become one margin and its size will be equal to the largest individual margin. If one margin is negative, its value would be subtracted from the total.

so take you got you have two boxes, ignore the padding ignore the the border, right, let’s say you have to have one copy of a 200 pixel column with two boxes inside of it. Those two boxes or whatever size they need to be. And each one has 10 pixels of margin around them, but they are side by side. Yeah. What will the space between the boxes be? Just 10 pixels? Just 10 pixels? Yes, right? They will combine.

The last part is where both are negative, the margins will collapse and the smallest value will be used just for what it’s worth.

negative margins can get real funky. Yeah, like a negative

Yeah. That the easy way to put this in context, think about like your long form content, right? So if you’ve got, you know, your styling, blog posts and whatnot, and I’m literally doing this right now. And we had a conversation about it at work, because we were trying to figure out like, we’ve got instances where we have a lot of paragraphs, and so you like Right.

Normally, with, like long form content with linear content, you generally don’t margin tops and bottoms. You only margin like a paragraph, you tend to only margin the bottom. Sure, yes, just for the sake of simplicity. But then you insert a heading. And maybe that heading is supposed to have so much space on top and so much bass on bottom. But a heading doesn’t necessarily come after a paragraph.

Maybe sometimes it comes after an image or a blockquote, or something else that has its own spacing rules, right? You can get into this like weird headspace of how do I know like, how do I make sure to keep this the same size no matter what? And the answer is, you don’t have to think about it, as long as the largest size is, in fact, the size you need. Right, as long as the heading is always supposed to have 100 pixels before it.

It doesn’t matter if like, because if you have a situation that let’s say that is a paragraph and a blockquote and a paragraph. And your blockquote is meant to have 50 pixels of margin top and bottom to push it away from paragraphs.

But your paragraphs only have 16 pixels of bottom margin. Well, and even here, like the instance even works here, which is if your paragraph has 16 pixels bottom margin, and your blockquote has 50 pixels of top margin, it’s going to have 50 pixels of space, it will absorb that smaller number, that’s also true of something like a heading that comes after it.

around Yes, I like that. Yeah, it will always be the maximum value of the two but you know, top and bottom that is applied from the two elements. So that can be really helpful when trying to do that math of Oh crap. Like you don’t have to think about and here’s where this gets ugly is. Try to avoid adding padding and margin where you can. Oh, I do both all the time. It’s yeah, it’s and it’s a pain in the butt. Right?

The way I kind of I can describe it as padding should only be used in two instances. Okay, when you need visual separation, like actual visual separation, so it’s like you’ve got a button that you have a background on, and you want to make sure that background goes 20 pixels above and below what you need. Yeah. But that’s different from the rest of the background. So you need the padding to push the picture frame out away from it.

It’s like a matte on a photo, right? Yes, if you’re framing photos, you have a mat on it, because you want the picture frame to be away from the content, the photo, yeah, that’s padding, that is literal padding in this case. So that’s a great use of it. If you just need space. If you are hanging pictures on the wall, you just physically separate the elements. And that’s done with margin. Remember, we said at the start, padding and borders are part of your box.

I did say I had two uses for padding. The second usage is when you need your hit space to be bigger. So sometimes like let’s say a menu item, you want to maximize the hit space for your your menu item. And it might be that you’re in you know the height of your menu is 50 pixels.

So you might as well use all of that for the hit state of your menu item and Even though visually, it may not look like a button, or it may not have an obvious border to it or an obvious in spot to it, by using padding, you can increase the area you can touch or tap or click on. So the issue here and so we pretty much hit on it, but I just want to say it like plain, unlike spacing is additive. If you have padding and margin, they combine.

So like you were saying, if you have padding on the top of your footer, and then margining of 20 pixels each, then you have 40 pixels of space before your thing hits. If you’re if you have an element with 20 pixels of bottom margin, and then your next element has 20 pixels of top padding, again, you’re gonna have 40 pixels, you don’t get that collapsing, the margin padding never collapses for what it’s worth.

There’s no such thing as padding collapsing. Okay, so here we are, we’ve talked for like 45 minutes on this, and you’re like, what are you going to talk about the box model? That’s what we’ve been talking about. This is all box, man. So all you need to know now is the difference between the standard box model and the alternative box model. And it’s just how all of these things work. Yeah, I’m

Yeah, that’s real. That’s the thing, right? You it doesn’t it just like the fact that we call it the box ball in general, it’s just the conventions a name we’ve created. The standard box model is what is standard. It’s literally how the browser is going to react out of the box. Now, maybe I, I would have to check this and I didn’t before the episode ran. And you would think I would have because this is sort of important, but I didn’t.

So I mean, don’t judge me. As far as I know, the standard is the standard like the browser’s have not overridden this as the default behavior, which is that the standard box model is what we call content box. That means that when you are putting your sizes together, the size of your element, the outer box of your element will be the height or width, depending on which one you’re measuring. Plus padding, plus left border plus right border.

Right. So if you say this element is 100 pixels, with a five pixel left margin and a 10 pixel, right margin, the total width is 115 pixels. Added right? Everything’s additive. This is what we call padding pushes. So with that 100 pixels, that padding pushes outward on your element. Now I did say a board. I didn’t say how much padding was on it.

Let’s say it’s let’s say it’s 50 pixels, or let’s keep it 100 pixels, the box you say is 100 pixels, and then you say it’s got 10 pixels of padding, and then two pixels of border. What you’ve really said is this is 124 pixels wide. Right? Everything’s added. So

So that’s by default. That’s the standard block box model. That’s how you calculate with with the standard box model. The alternative box model is turned on when on an element you say you use the CSS property box sizing. And you say the value is border box? Yes.

Yes, this is so yes. Now we come full circle, right. So here’s where this gets ugly, because the default is the standard, which is the value content box. Which means when you say height and width, it is applying to the content box. Not the container, not the box. Right? When you say box sizing as border box, you’re saying I want my height and width to apply to my border and work inward. Right?

Ie six said border box is the thing. Right? They were and it’s funny because like they were right like that is ultimately the better way to go about this. But they were the only ones who said that. And they didn’t let you override it. And so it was really nasty for like having to either write things separately, like two style sheets and apply only one with some fancy stupid selectors. Or you did everything with box sizing.

I’m gonna let everybody else blast you on that one. Because, I mean, ever at this point, everything you know, anytime you use Bootstrap Foundation, any of these, for the most part, a lot of resets, do this, like setting stuff to default to border box instead of content box for box sizing. Going with the alternative model makes things it takes away all the math now you don’t have to do math, you just have to know when I click on figma.

And this element is 100 pixels wide. Yeah, I don’t have to think about well, it’s actually however wide my content is plus the 20 pixels of padding on each side plus the border. So how why does that inner have to be now? Okay, well, that’s gonna have to be 54 pixels or 56 pixels width, like no, I just say it’s 100 pixels, give it two pixels of border and 20 pixels of padding, and it automatically subtracts that.

So I said, like padding pushes in the Standard Model, padding poles in the border box, rally alternative model. So now you it takes all the math away from that. Now, in

Border box, it’s effectively not entirely there are ways to get around it is effectively immutable. Right? It means if I if I tell you to have a 50 pixel border, then your box is all bored or maybe, right? Because it will add it on, it’s not going to be 200 pixels, 100 plus 50 plus 50, it will be 100 minus 50 minus 50.

So that the equation literally is content boxes, your height or your width, again, depending on which one you’re measuring, minus padding, minus left border minus right border. And that’s how big your content box is.

If you want to use the alternative model, by default, the easy way of doing it is just on your, in your CSS, just do the HTML selector HTML, and say box sizing border box. And then follow that up with a star selector. And you can do a comma star colon colon before comma star colon colon after and just say box sizing inherit. And that makes everything be border box by default.

And you can set things to content box, if you need them to be Aaron’s making faces at me, I’m going to need some folks to chime in on Twitter about this because I am right. Right, I enjoy

there’s something wrong with it is one of the two options like that’s it like it’s just one of the two ways of working.

I feel a twitter poll. That’s that’s what we’re missing their Twitter poll. I just wanna have fun with that. I want to fight Yeah, I’m fit boy. So last thing I’ll leave you with, the easy way to really figure this stuff out is just go use browser dev tools. So if you you know, hit F 12. Right click, click Inspect on something on usually on the inspector panel or the Elements panel, there is a sub panel called layout.

And in that, it will show you a visual representation of how it’s calculating the box model.

Yeah, and you can you can also get it with Chrome. It’s also inside the styles tab. It’s just at the bottom of the styles whereas computed puts it at the top. But yes, you are. Right it is it’s not on the light layout is a totally different deal on Chrome.

that visualization is super useful. It’s also your gateway. And I’m just dropping this as a hint, I’m not going to go into it. But from there, you’ll discover that there are ways to do things like show like your CSS Grid lines, or your your flex boxes and things like that, as well. And that will open up a world to you if you have not done it. So. And it’s all in AI.

It’s in Firefox. It’s in Chrome, I think it’s all relatively in that same area. So be on the lookout for that. But that is your introduction to the CSS box model. And that is your introduction to the CSS. I said that I did that already. He said that. Listen, I am Bacardi drunk on Sodastream. Orange Tang. And I’m not even kidding. Like it is orange, the orange Tang flavor squirt.

a user center top center tag, right?

float center, you

it say center?

And if you want to get a little swirly with this and you want to go a little farther about like actually centering stuff and you want to get into more these other display types. Go check out either Flexbox froggy or grid garden. And you’ll learn about things like align items center or justify content center that has to do with how you sent her a div.

But within the context of some of these other layout mechanisms we mentioned we will go into these in depth later this season. But

powerful.

literally have not drank of

I can’t I can’t tear you down for that.

human human work. Not not robot work robots what we use now, the robots better than our old robot, but I live in boxes. I like people better.

I’m a boxy boy transcript. I don’t know why that was a joke for the evening, but I’m drunk kind of just landed on it. I guess. I’m like, I’m like a dog with a bone. I’m a dog boy. Oh god, I almost I was hopeful. I saw that cup going up and I’m like, Oh, I’m gonna get him. I know. I did not. Well, yeah, it’s mostly empty.

And I just I just did not do a good enough job being the boy who keeps this persona as close and as ladies and gentlemen, hope you enjoyed this episode. We’ll see you next week.