The Box Model is a fundamental component of everything we do in building a layout for a website. Yet, you may not know all the idiosyncrasies or particulars that underpin how it affects rendering of elements onto a page. From static positioning to margin collapsing, there’s a lot of behavior to understand that can help you make your next project even tighter. We’re taking a deep dive into all things box model to answer any question you may have about laying out your content wrappers.
Followup Resources
- Box Model on Learn CSS
- The box model at MDN Web Docs
- The CSS Box Model
- The CSS Box Model: Explained for Beginners
- Understanding The Box Model in CSS
Transcript
The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.
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.
We’re other other hosts coming to you from the future. But back to the past to appear on the episode. I’m listening to this tomorrow afternoon.
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.
Cats love them.
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.
For those of you who have been in the game for a long time, the words box model might conjure up feelings of anxiety and panic if you’ve lived through the mid mid early aughts.
But it’s better now.
It’s very much 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,
are we going to talk about how to center a div? That seems I mean, everybody come on? Oh, yeah, we’ll see.
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
else to complain about when you’re doing your CSS.
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.
Yeah, I’m not drinking any adult beverages. I’m drinking. And I was gone. I had I had the Rona and I’m
Oh, that’s right. I’m sorry.
I just arrived. Yeah, I survived. I’m like on the mend. It’s fine. Couple scary days, but not not to be political. But this shouldn’t be political. But get your fucking vaccines people.
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.
Oh, no, dude, like live it up for me. Please. Like I will drink. No, no. Oh, it’s weird. Okay, well, then maybe I’ll drink vicariously will depends on what you got there. Okay, so we’re gonna,
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.
It’s either orange or on very unhealthy urine,
and a lot of rum. That’s cool. I was like,
I’ve been there, man. It’s cool.
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.
I’ve done I haven’t done that specifically. But I’ve had similar mixed beverages in a SodaStream bottle. And it’s great. Yeah, I mean,
yeah, it is absolutely not bad. So that’s what I’m doing. I, man, I don’t know. I got strange.
Wait, did you remember to carbonate the bottle before putting anything into it?
Oh, no, I just mixed it all and then put it in there and let the carbonation mix.
So you got to carbonate your water first. And then do the flavors and anything. It’s not water. Otherwise, it can get residue and stuff on your nozzle.
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.
Oh, yeah. And I shake, you can just kind of like agitate it by rocking it back and forth. That works. Yeah,
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,
that’s a great definition. I would add to that, that it is an abstraction. It’s not like an official named thing, I think, is this.
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 we just we refer to it in this way when we’re talking about this stuff. As a concept.
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.
It’s like like you’re not about it’s a taboo word fellow to say the word. You have to talk about it.
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.
Okay. It’s the it’s like a like the the king in yellow. You can’t say
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,
right? Because our displays are grids of pixels. And I mean, this
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.
And I got it. It’s like got the box model is kind of like how containerization is. The box is like one size fits all conceptual abstraction that will contain any element on a page
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.
That’s the configuration of it. Yeah, yeah. But like everything on the page, regardless of what it is, it’s a checkbox or radio button or block or anything. It’s a box.
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.
I think what you’re really describing there, like kind of reductively is, when we used to use like tables for layouts. When we got a case very truly limited. It was like really, really a box, and it was a single plane of boxes, and you put stuff into these littoral cells.
That’s my Neria box could overlap.
Right, right. Because the difference now is that with Z index stacking and absolute positioning, and just like the way things flow, normally, you can have kind of, like multiple planes layered on top of each other.
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.
I think it’s a hunk of junk. You know? We are just like multiple levels of humor today.
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,
right? So let’s
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
right. So I think the most basic concept would be that every box has a width and a height. Right? Like just implicitly taught logically by design. A box has width and height, but not always, well,
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,
I’m guessing inline and block,
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.
The I guess purest instance of each of those is that a span tag is the inline version of div, which is the block version,
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.
It’s interesting, I hadn’t thought about it that way before. But it’s also important
to note that anytime you use one of those custom inner types, its parent
is, by default block display block. It should also be noted that an element that is inline, you can’t set the width and height for it explicitly. There, you can only do that with a block. box style element in mind is really just like, this is the box that wraps this content. But that’s it.
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,
this span is still technically as height or width. You just can’t like, you can’t set it. It has it has, it expands to fit truth heads.
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. And and they will vertically extend with the content you put into them.
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.
It’s like the carriage return on an old typewriter like it’s the part that you reset back to the far left of the column that you’re in. And then you begin again.
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.
Okay, yes. Yeah, I
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
it when you’re dealing with absolute positioning, it has like an origin point, you know, wherever the element appears in the flow. But beyond that, I mean, if it was to extend 100%, that would be the viewport basically. Right? extending as far as I can,
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
a difference? In what sense?
Well, you can do so you can say position static, you can say position relative. How does that affect?
The static is the default display for elements for some elements? Right, right. position relative allows you to use the top bottom left and right oh properties to position it relative to where it would have rendered. I actually encountered this recently, I was trying to get some navigation elements to line up and I was using both text links. And also like font awesome icon links.
I think it was fun, awesome. Maybe material design, one of those, but it was an icon and there’s also text but because the way the text works with baselines and the vertical alignment of it, they weren’t sitting correctly, so I actually had to take the idea con, next to the text link and then use relative positioning to bump it down about five pixels. You can have to show, right?
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.
Static and positioned an elements with positioning relative or absolute, are in two different stacking indices. Yes, and position relative is higher, like in a separate set above statically, Z index items. So if you have three different spans, and they’re floated, or whatever, and then you have something its position, relative position absolute, it will appear above the floated ones, whether or not you want to do because it’s a separate stacking index.
This doesn’t happen as much anymore. And so if you’re listening, you’re like, What the fuck? We don’t do float as much because we have things like Flexbox and CSS Grid and other
better better tools.
But that was that was the thing though.
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,
like, this would be like a span, or emphasis tags, or strong or bold, or italics
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.
Your textbook kind of ridiculous if you every time you may text, boldface, and jump down to the next line, and is full width.
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.
A funny thing about inline content is that the box like the box box model, of in my content is set based on how big does the box need to be to display the content. And then whatever changes you make to it with styling in your CSS, you can push that text all around, the box itself doesn’t change, it might change with margin or padding, sending changes to it.
But like if you change the line height, or Text Indent or whatever else, the box stays where it is you just move the text and sometimes text move out of the box entirely, which is kind of a weird and unexpected thing. But that’s the joy of working in CSS.
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, it’s kind of it’s kind of I don’t wanna say the best of both worlds but it has behaviors from both worlds because it doesn’t extend to fit the, like its full width or anything, it will just use the minimum footprint necessary to exist. But then you can actually change the size of the box itself using those property.
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
lot with a tags when you would have an a tag as a button with the headline block on those. So I
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 I guess it’s a spicy block.
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.
Yes, I agree.
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.
Right. So, before we do that part, I think we should first say that margin and padding and many other things that have four sides to them. Like they’re boxy. You can do like padding top padding, right? Yeah. Padding bottom. Um, that’s like, that’s the long way. And sometimes that’s the way you want to do it when you went over.
And they will be prioritized above a general.
Right? Right. But when but you can also shortcut it. And so if you’re doing a border, or you’re doing margin or padding, you can just do margin, just as you were just saying like, or you said padding, like he’s saying 03, or whatever. So
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.
That’s, that’s the one I use it constantly. But that one is tricky. Because if you know about top right, bottom left, any like why just wanted to Top and right. You might think you’re just doing to, like five pixels by five Yes, to get top right. But no, that will get you. Y coordinates are the Y directional sides. And then the x direction.
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?
Whatever, whatever it would normally be zero or whatever. Hmm. Is that it? Does it take the x? Yeah. I don’t usually do just three because then you can do just three. Puff. Okay. So it wouldn’t be five pixels. Hmm. With this oh, five top 10. Right. So it’d be 1010.
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?
That I would say you mean like zero on all the sides? Yeah. So I would do padding zero px and then padding left 10 VX.
Well, okay, but do it do it as a shorthand though, specifically?
So padding? 000 10.
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.
Okay, hold on a second. So any of y’all who did web development in the early 2000s, around when IECEx was popular, this is where shit gets weird. And this, you’ll remember this. You ever heard about an AI hacks file? That’s where this stuff comes in? This? I’m only bringing this up because like, this was such a nightmare for a long time. Like it was a calculators.
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.
Right? And yeah, so like, basically your width, you would set your width to be something thinking like, I’m okay, I’m gonna make this 100 pixels wide. And I want to add, like a two pixel padding to the left to the left and right sides, and then two pixel margin to the left and right sides. And you think you think that it will fit inside of what 108 pixels wide? Well, it’s the
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.
So if we have a box with with 100 pixels. Let’s say you want to put two boxes side by side. And each box is 100 pixels wide. And you want to put a two pixel border around each one. What size do you need to fit them inside of so that they don’t bump down?
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
on the left, yeah, on the right, yeah. And then another two on the left, another two on the right,
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.
If you wanted them to fit inside of a 200 pixel wide column, you would have to make your width set to 96 pixels, right? Because that’s 100 minus two minus two. Yes, one. This is the kind of math that we had to do.
Yeah, no, this is why I mean, it’s still like this is still a thing. Like it’s still, this is why
this is why I have a flex, I will flex so much because I never have to do this shit anymore.
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,
padding. padding is when you want to give like let’s say that you have what’s your making a button, your styling a link tag as a button. And you want the text have a little bit of breathing room around it because you put like a cool like teal color in the background and the text is white and you want to not have the text be cramped. So you throw like half a ramp of padding up. And then it has the text sits inside of a nice little blue field. Unknown Speaker So if padding is inside
margin is the alternative to butter.
Yes. It’s not bad with a little garlic mixed in with it as well. But also it is outside an element.
Right. So this is when you want to give your element breathing room as your element having breathing room, not just the text, right want to have like a series of buttons in your navbar. And the text has padding so that the text has a little bit of space around it. And then you also want the button is to not be right up against each other. So they kind of have their own breathing room. You give them margin.
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 you have RV specific
then then you have your road verge. Right. And the road Verge is what is between your
fence? What’s the road version?
It’s the road. It’s the road verge. I don’t even know what else to call it. Is there another word for
that? There were heard that term before the carriageway? I’d walk
it’s no it’s what’s between the sidewalk in the road. Right? That little strip of grass.
The little bit of land that you’re responsible for maintaining but isn’t technically your land. Yes, exactly. Yes. Okay. I didn’t know that’s called Road verges, road verge.
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.
I imagine like would be like a DMZ to like, it’s you have, you have your house, you have your fence. And then if you didn’t want your fence to be on your property line, the area between your property line and the fence would be the margin.
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
want to put plants or something on the outside of your fence, but you need to keep it on your land. So you have your property line, and then the fence and then your padding and then your content.
Now there is one really kind of cool, semi complicated concept that is worth mentioning here, which is margin collapsing.
Oh, yeah,
you know what I’m talking about,
I know what you’re talking about. And it always trips me up. And then the way I deal with it is I just say fuck repeatedly. And then just keep tweaking the margins until it looks like what I would have done. Well, that’s one
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 technically, the example we use earlier with a to 100 pixel boxes, if the margin right of the first box and the margin left of the second one would actually merge into some pixel Mark. Yeah,
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.
Second, and more negative margins are weird.
negative margins can get real funky. Yeah, like a negative
margin is what you would use when you want to like pull content, like we were talking earlier about like if you you place your inline element, and then you can fuck with the text however you want, but the stuff stays where your fingers touches it, you know. But with negative margins, you can make the thing kind of, like, Phantom li up here off for where it should be. Even though the root, the root of that thing is where the finger was very delicate.
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.
It can be useful to intuit it as the margin that you set is like guaranteeing that you will have at least as much yes,
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?
I do it. I’ve done it so many years, man that like it’s whatever. Now I just see it in my head, like I’m Neo in the Matrix or whatever. But But yeah, no, it’s like, I remember when I was starting out, it was a pain in the ass.
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.
Right? So a case that I did recently, I was setting a footer on a site, and it had a solid black background. And the background of the content area was different. It was using like an image for the background and had a different look. And what I wanted was I wanted the text in the footer to have our own have the background, the black background of the footer to extend a little bit above where the text was to have some space there.
Just visually some whitespace or black space, I guess this case. So I used padding top on the footer, but that also I didn’t want the content to run right into the footer. So I did margin top on top of that, right? Yeah,
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
curious about this. I don’t know that I knew that there was an alternative model. Maybe I’ve been using it this whole time and it didn’t know it. Well.
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
if you’re wanting to fit two of them into a single column, side by side, then you need 248 pics. Yes. Margin not counted. Right? That doesn’t add in.
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.
This is this is the default behavior on IECEx.
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 don’t agree that it’s better. Because because of the way the padding and the width interact, where there’s kind of like the widths get the sizes get weird because you think you’re setting it to be a certain size. And then like the padding gets, I don’t know. It’s hard to explain this. It’s just I’ve used both And I find that the standard model is more intuitive.
When you approach it from the perspective of content, I guess maybe that’s the thing, right? Is if you’re if you’re approaching your web design, the way you might do like an application, like you’re making a wind form or something. In those cases, you wanted to find the box. Yeah, I know what you’re gonna,
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
this case, you say you have 100 pixels wide.
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.
Right? So if you if you have 100 pixel wide box with, say, four pixels of padding and two pixel border, then your content box is actually what 8888 Good, good math. Yeah, Unknown Speaker I mean, you’re not drinking Toto,
I told you, I do this, I’ve done this for like, literally 20 years. Now.
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
we can both have our preferences, I You can take my content box from my cold dead hands like I just
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 like content box because I like to say the content is going to be this big. And I want to have this much padding. And I’m like building out from each of the content that I like manifesting onto the page. And I worry about the placing and stuff later, like I you know, whittle it back down as necessary.
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.
on Firefox, or at least in Chrome, it’s called computed as it computed. Yeah, there is also a layout one but the layout one gives you options to enable visual hints on CSS Grid and Flexbox.
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.
two cool things about that though, is you can hover over the margin, border padding and content. And it will highlight it on the page. Yes. And you can click on the little like dashes on each of the spots on the four sides of each of those things, and click on them. And you can change it, do like whatever you want, right?
And it’ll actually modify it, it’s really cool. I really happy that they made this, that’s probably the most intuitive way to understand the box model is by seeing that diagram. And just messing with the number
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.
Oh, man, that sounds really good. Actually. Oh, wait, we talked. We never actually mentioned about centering. And if I’m going to give you give them do it to two tricks for centering. There are many different ways to do it. Or horizontal centering. If you want to center,
a user center top center tag, right?
If you want to center, a block item that has a width set in it
float center, you
know, you can do margin zero auto. And what that does is it auto sets the margins on the x axis. Does
it say center?
No, no, it doesn’t. This is like this is like a real hack back in the day. So margin zero auto. If you have a statically set with item instead you want to center inside of its container. The other ways to do it to the container and do text align center. That’s a little bit cheaper and it’s not maybe as reliable, but in a pinch, it usually works.
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
I love Flexbox it’s my favorite Flexbox and grid are super
powerful.
We will do we will do an episode on Flexbox and grid if that’s something that interests people, and you can let us know on facebook.com/trucking UX or Twitter box.com/trucking UX or instagrams.com/drunken UX podcast or drink good ux.com/discord box no box no no box stroking box comm box don’t record boxer
literally have not drank of
COVID brain man.
I can’t I can’t tear you down for that.
And then you know, if you like the show, and things like transcripts of stuff matter to you, please help contribute to our transcript effort tracking newegg.com/support or like if you’re a Patreon there’s a few different tiers and we put the money right into doing eventually getting human will pay a person a good rate to do actual human
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.
And let’s see boy,
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.