503

August 29th, 2022 × #css#layout#margins

Margins

Discussion of various techniques for handling margins and layout in CSS including collapsing margins, padding vs margins, flexbox, grid, and using spacer divs.

or
Topic 0 00:00

Transcript

Announcer

Monday. Monday. Monday.

Announcer

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, Yes. The tastiest web development treats coming in hot. Here is Wes, Barracuda,

Wes Bos

Boss, and Scott

Announcer

Tell.

Topic 1 00:28

Talking about margins and CSS layout techniques

Scott Tolinski

Welcome to syntax On this Monday hasty treat, we're gonna be talking about margins and CSS and techniques in your layouts for dealing with margins.

Scott Tolinski

Something I've recently been diving into quite a bit in our design system, and where people are doing a lot of really interesting different techniques. And we're gonna be talking about some of those techniques today, what the strategies are, and what some of the pitfalls with those strategies are. My name is Scott Talinski. I'm a developer from Denver, Colorado. With me, as always, is Wes, the margin boss.

Wes Bos

Who would have Thought that we'd have an entire show on just margins, but, honestly, it's been the talk of the town lately. I think even margins,

Scott Tolinski

And as far as, like, CSS, like, footguns go, they're they're pretty high up on the list in day to day things that people actually actually struggle with. So I'm I'm glad we're talking about it. Me, personally, I I feel like this is one of those things that I've never sat down and really Dove in to find the best solution. So I'll tell you what I'm doing now and maybe what some of the things I've tried out, and we can talk about all these different things. Now this episode is sponsored by 2 amazing companies, Sentry and Auth0.

Topic 2 01:40

Sentry sponsor

Scott Tolinski

Now Sentry has a new conference called Dex, and, they want you to know about it. It's actually gonna be on September 28th in San Cisco, you can attend in person or virtually, and you can find out more at century.ioforward/eventsforward/dexor.

Scott Tolinski

We'll have a A link that's specifically for syntax in our show notes if you wanna let them know that this is how you heard about it. But, you know, what they say Say here is that deploying new code can be a lot like making a great sandwich, taking a bite, and having all the contents fall out.

Scott Tolinski

Exciting, chaotic, and maddening. And, I I you gotta wonder if they wrote that sandwich thing just for us knowing how much we talk about sandwiches on this This show, it says, if you know the feeling, then decks by Century might be for you. This is a conference by developers and for developers is where you'll sort through the madness and look at ways to improve your workflow productivity.

Scott Tolinski

Join Sentry for this event in San Francisco or Virtually on September 28th, then discover all the ways to make your life easier. Save your seat now. Century.ioforward/eventsforward/decks.

Scott Tolinski

Thank you, Century, for sponsoring.

Wes Bos

We are also sponsored today by Auth0.

Topic 3 02:52

Auth0 sponsor

Wes Bos

They handle authentication Authorization in your application so you don't have to.

Wes Bos

It's pretty awesome. I've used it in a couple of my own applications.

Scott Tolinski

You can do everything you need to do to authentication

Wes Bos

and permissions in your application. You can log in with social providers. You wanna log in with Twitter or Google. You have customizable customizable? Is that a word? Customizable.

Wes Bos

That's the word I'm looking for. Mhmm. Login page.

Wes Bos

They have SDKs for Node, Express, React, Next. Js, and many more, so very easy to integrate it into whatever app you're working with.

Wes Bos

You can use they have features such as next level, user management, including roles and permissions and multifactor authentication.

Wes Bos

Have you ever tried to not only implement your own login system, but then have to work on roles and permissions, who has access to what, And then you also wanna have multi factor authentication, that little code that you need to put in. Device biometrics, you wanna be able to use the Face ID or touch ID or any of those on your your phone.

Scott Tolinski

That's a lot to think about. Yeah. Let me tell you, as I did 2 the 2 full on tutorial courses to cover all of that. There was, like, 45 videos to teach you how to do all of that. No kidding. If there's something you need to use,

Wes Bos

external service and let them handle it. And for you, it's definitely authentication. Go to a zero dot t o forward slash syntax To sign up for a free account and give Auth0 a try. Again, that's a zero dot t o forward slash syntax IQ Auth0 for sponsoring. Alright.

Wes Bos

Tell me about margins, Scott. So okay.

Topic 4 04:33

Issues with collapsing margins

Scott Tolinski

We we work in layouts. Right? Sure do. We're we're getting things vertically, horizontally laid out. We're laying them out. And one thing that you always have to do is space things apart. Right? And the common technique is to use margins for this. This is kind of how it's been done forever. And margin I use BR tags. You use BR tags, which We'll actually talk about a modern BR tag later on in this, so, we can talk a little bit about BR tags. I'm here for that.

Topic 5 05:02

Nonbreaking spaces in WYSIWYG editors

Scott Tolinski

Or what is that? Nonbreaking space Nonbreaking fan. NSPs. Yeah. Yeah. That's a a WYSIWYG's dream right there. I I remember, like, getting into some generated code from WYSIWYG, and this is, like, 10,000 NSP and And VSPs, whatever, just littering your code.

Scott Tolinski

So, you know, this could be a giant pain in the butt. And in fact, it I I think many times, It can be even be a foot gun for people who are new to this stuff where you have something called the collapsing margins, where if you have a margin bottom on something and a margin top on something, I think the common sense approach would have been like, hey. Yeah. If you have margin bottom 5 pixels and margin top 5 pixels, well, that space between those 2 should be 10.

Scott Tolinski

But, because of collapsing margins, you have the browser saying, you know what? We know that you intended on those to be 5, so we're just gonna make that 5 for you.

Scott Tolinski

And that, to me, always has felt, I gotta say, like, the wrong design choice. I don't know about about US, but it's always felt like a weird thing. Yeah.

Scott Tolinski

Yeah. Collapsing margins are are like a lesson onto their own. It I think it makes sense

Wes Bos

when you have HTML stripped or sorry. CSS stripped from a document, and you have that base.

Wes Bos

Like, you don't know if you're gonna have a paragraph tag and a h 2 tag right beside each other. And if that's the case, it does look weird. Right? Like, it's actually kind of a decent feature for, very simple. But once you start getting into complex layouts where you do wanna have full control over that, sometimes it it doesn't make a whole lot of sense.

Scott Tolinski

Yeah. It won't make matters worse if you have, like, containers and then, like, a margin top of something on the side of a container. It can even have its own odd functionality, but then you throw padding on that container, and the story changes entirely. So there there's there's some some just totally weird stuff to the point where people have wondered, Are are margins really the way to go here? And so I've really, I've listed a few techniques in this episode that we'll talk about as Ways that you can do margins in whether that is through margins or elsewise. So the first one is just margins. And if you understand how collapsing margins work, you know, you can get away with just doing straight up normal top bottom margins and and working with the collapse, kind of like you'd work with the cascade in CSS, but you can work With the collapse to make it all function really well for you.

Scott Tolinski

The biggest problem here is, like, what we mentioned, there's a lot of weird kind of, weird situations that you can get yourself into something getting pushed down here, and it's like a child of a container's margin.

Topic 6 07:24

Issues with overriding margins

Scott Tolinski

And, also, like, many times, You end up having to override things. Right? If you're setting margin top and bottom on many elements, you you'll find yourself overriding those a ton even doing things like The first any for any I have a little CSS snip snippet. It's like the immediate first child of A container should always have margin top 0.

Scott Tolinski

And, like, I I've used that so many times to remove the margin top on headings that Sit inside of a card or a modal or anything like that, and you find yourself having to override it all the time. And and that can be fine. I I've certainly built a ton of layouts this And probably most of the layouts I've built have this way.

Scott Tolinski

But, if you wanna remove some of those foot guns, you can make the call to say only padding instead of margin. Now only padding instead of margin reduces the collapsing margins issue. It reduces Some of those other issues that we're talking about, like the margin escaping a a container.

Topic 7 08:15

Using padding instead of margins

Scott Tolinski

Have you ever tried to do only padding and no margins?

Wes Bos

And I'm talking vertical here. At first, I heard somebody say this, and I was like, what? That makes absolutely no sense. You're giving up on margin. But then I, like, I, like, looked into it. I was like, why are people saying only use margin? And the the I guess the idea is that if you are styling stand alone components, Don't bake margin into those components because you don't know where they're going to be.

Wes Bos

So only put them so only do padding, And that allows it to be part of the component itself, and it doesn't affect things outside of the component. Right? Because margin is outside of the element. And Yeah. Your component should only be concerned with itself and everything inside of it. And if you do need spacing between those things, Then that should be done at a layout level, not at a component level. Is is that kinda

Topic 8 09:01

Only using padding in components

Scott Tolinski

your your idea behind this as well? Yeah. That's part of it. And that end, like I said, getting to reduce the need for things like collapse collapsing margins kind of yes. You know, showing showing up.

Topic 9 09:29

Downsides of padding only

Scott Tolinski

But like you mentioned, like, the big downside here is that padding is inside of the box We're, like, margin is outside of the box. Yeah. So that might not be appropriate for all types of layouts and all types of, situations because You're increasing that box size. And if you have a background on something, you know, that background then gets increased as well. So there's definitely, Some some I don't I the the thing that I've stumbled upon I'm gonna I'm gonna give a bit of a spoiler here towards the end of the episode. None of these solutions are like the golden solution. So I'm just there's there's kind of trade outs here, and I think that there's some importance in talking about them. But, yeah, I you know, padding to me, the big thing is if you're having trouble really Containing your collapsing margins, using padding for everything might be a good one. Now here's the next one using margin or padding, the same way you do, but only set them on the bottom of something. So you will never have a margin top on anything unless it's like a special one off use case. So if you're designing your system, you'd say, alright. Paragraphs have a margin bottom of this. Headings have a margin bottom of this. Whatever. And to me, this seems like a really decent way to approach it Because, it's almost like a CSS break tag where you can set that break tag, whatever that is, at the at any increment that you want, And this makes it way more predictable. You don't have to deal with collapsing margins even if you are using margins.

Scott Tolinski

Everything just becomes overall more predictable.

Scott Tolinski

So If if I'm picking any of these strategies, you know, having something set to the bottom specifically has been, in my mind, the the best kind of course of action,

Topic 10 11:06

Putting margin/padding only on bottom

Wes Bos

if you're going with, like, a margin or padding based system. I think that that makes a lot of sense is just put it on the bottom if you need it, And that's a nice rule because it it doesn't like, the padding only, you get into issues where you're, oh, So I have to wrap another div around it just so that I can dance around the idea of not having to put any margin in it. You know? And then you get That's annoying. Like, you you're just adding more elements for it. But this one of having only margin or padding on the bottom,

Scott Tolinski

I think I could work with that. Yeah. I know. You know what? I actually like that technique myself. Now here's where it gets interesting because there's a couple of newer techniques where people are are kind of They're they're gonna go off and do some new things here. And one of which I I saw recommended is I just use Flexbox vertical for everything, which if you've used any sort of React Native system is kind of how styling is done inside of React Native. Now this to me seems like it could do really nice things if you need, like, Spacing in your layouts where you wanna shoot something to the bottom like a, sticky footer type of situation where you could just say, Alright. In this layout, this thing is always going to be in the bottom. This is always gonna be in the middle. This is always gonna be in the top. You can, have things take up specific amount of size In their their areas. And, like, for the most part, you can use GAP to do your your margins. Now this one has some downsides to me. Flexbox There's too many weird unpredictable things squishing and squishing and growing my content in ways that I might not want it to be.

Scott Tolinski

So this one will require a bit more of, like, a, I don't know, a bit more of an understanding of how your how your layout needs to be, but also Flexbox in general to get this to be tamed.

Topic 11 12:51

Issues with flexbox for layout

Scott Tolinski

The big issue I have with this is gonna be the same big issue I have with the grid for everything.

Scott Tolinski

I think if you're choosing grid or Flexbox for everything, one of these strategies, grid for everything makes more sense to me because you kinda get all the benefits of the Flexbox Type of vertical situation, you can use GAP for spacing.

Scott Tolinski

Everything gets a grid container. So anytime you need to space out anything vertically, you use Yep. Essentially.

Topic 12 13:21

Using CSS grid for layout

Scott Tolinski

Yeah.

Scott Tolinski

Downsides are it's less flexible. You need a container for everything. Also, like, if you if you think about it, you know, And sometimes in your design system, the header has a bigger gap than the paragraph. And if you have headers inside of in intermixed in between things and it's not a standard layout, Then what do you do? Like, to me, this seems like this could definitely work for a situation where you had a header, some content, whatever. You had, like, a reliable, specific layout. But as, like, a generalized design system layout tool, this one seems like tough to me Dealing with different types of gap between different types of elements.

Wes Bos

Yeah. I could I could see somebody Deciding this, and then the designer comes back and goes, no. Like, add another 20 pixels underneath that thing. And he was like, oh, that's against the rules. Right. You know? Now I'm in the trouble because I don't have individual control over this thing, right? Yeah. Individual control is important as much as you like to Ideally, have everything exactly the same.

Topic 13 14:28

Issues with grid layout

Wes Bos

You're going to be asked or you're going to want to be able to space things separately.

Scott Tolinski

Yeah. And this leads me to a kind of modern version of the break tag, which is the spacer div. And the spacer div is essentially just a div That does nothing but provide space, padding.

Topic 14 14:45

Using spacer divs

Scott Tolinski

You can do it padding or by height. You can have it based on, like, your math of a system. So, like, If you have a line height of a specific amount, you can know what that pixel amount is, and then you can make your spacing give one line of your code. And then, oh, I want this spacer to be 4 lines, 5 lines, whatever.

Scott Tolinski

And in our modern component based system, You might think this could pollute your dominant very well may. But if you drop these things in in a single component, it's not like you're having to use this exclusively everywhere, but Sometimes you just need a little bit of an extra space between something.

Scott Tolinski

I've adopted the spacer dip. I'm gonna say that.

Scott Tolinski

In in fact, what I've done is I I I wanna maybe I've I've taken down a system where I have essentially padding bottom, or margin bottom. Right? Yeah. As my my defaults.

Scott Tolinski

But then if I need an extra space instead of We're writing the CSS to say, alright. Now you have a margin of this amount. I just drop in a space here, div. I gotta say,

Wes Bos

pretty nice. Not a bad idea.

Topic 15 15:46

Benefits of spacer divs

Wes Bos

It's funny that, like, we come back to all these 20 year old things and be like, actually, maybe that wasn't a bad idea. It's declarative. It's its own thing. The the kinda neat thing about it is that, if you want to grab on to that spacer div, do Anything, you have full control over it because it's a proper element, you know? Notion. Notion has blocks, right? And one of the blocks is just empty space. That's that's pretty cool. I think I like that. I I think next site I do.

Wes Bos

If I need a little bit of spacer div,

Scott Tolinski

I might, might be going to get that for myself. Yeah. And here's actually here's a little here's an extra little nugget of of goodness OS for you. What I did is I made my spacer div.

Topic 16 16:30

Making spacer divs a component

Scott Tolinski

This is actually really interesting. So I've made a spacer div is a Svelte component, and I made this thing global. So it's a global component. I don't have to import it because that Can you imagine importing a spacer div to use it? That sounds like just like my I gotta import it dev now. Like so I I made a a spacer div component that has a size prop, and that size prop is just a and it's just a normal one value. So, like, if I want a 1 size spacer, it's 1 space. So I say space size of 1. Right? I don't even have to say size 1. But if I want a size of 2, it's actually just doing math inside of the component to say padding top And then size times whatever that default value minus 40 pixels. So for me, 1 space is 40 pixels. If I want, 2 spaces, then it's just 2 times 40 is 80. If I want 1.5 spaces, it just does all the math for me. So, It's nice and simple. It couldn't get any easier than that. And, I mean, granted you could do this with CSS in in all sorts of ways, but it avoids me from ever to reach into CSS overrides for any of this stuff. So is there a reason why you do it as a component rather than just a class? For this configuration option. Right? So if I had it as a class, you'd have to have, Like, a whole bunch of premade classes generated. Oh, yeah. Yeah. Tailwind. Right? Where I'm saying, s s Forty, whatever, to get a a a 40 size pixel. Where it's here, it's just space. Alright. And I named 9 space because I thought that was cool that cooler than spacer.

Topic 17 18:06

Why a component instead of CSS class

Wes Bos

Yeah. Me of being in space. You know? I'm trying to think. Like, could you do it with the, CSS calc and the Attribute? I don't think you can use the attribute

Scott Tolinski

as the value.

Wes Bos

Can you use attribute CSS? Do it with

Scott Tolinski

A class and then, like, an inline CSS variable, I think. But I don't know if you could do it in the type of way that I would want to do it. Like, I think this way ends up being a little bit slicker, but I I think you could do it with just a class. I just yeah. You could do it with a class in calc and a CSS variable, But I think that's probably the

Wes Bos

the way. I'm I'm just looking at a Stack Overflow question, And it says calc, a 100 p x times ATTR.

Wes Bos

So ATTR and CSS will allow you to get data Or not data ad and literally any attribute. Any attribute.

Wes Bos

Does it work, though?

Scott Tolinski

Can can we actually do this?

Wes Bos

Let's hold on. I will figure this out. Let's pause for just a second. It does not work yet. So no.

Wes Bos

I remember there being some things like, oh, at h t t r is awesome because you can just grab attributes. What you could oh, no. That's how you could do it. You could just inline a CSS As variable via the style. It's not as nice because then you have to say style. Yeah? I'm gonna ask you to rewind the podcast about 1 minute maybe where I said it said Oh, did you say that? Sorry. I was as you were talking about that, I was furiously googling. I was like, I bet you could do this. So yeah. Okay. I I like the I like the way you've done it. It makes sense. That's why there's a component. You could just calculate it on the fly.

Scott Tolinski

Yeah. And you get some type scripting there too if you want. Yeah. Yeah.

Topic 18 19:46

No best solution, combo conversation

Scott Tolinski

Beautiful. Alright. Well, that is margins. I would love to hear what everybody else has to think. Like, do you use margins? Like, have you even thought That you possibly shouldn't be using margins. Have you run into issues? Tweet us at syntax f m. We'd love to hear your thoughts on this. Yeah. And I know a lot of People on Twitter were really adamant that the grid vertical grid system and the vertical Flexbox system was the way to go. I Wes, you would not believe how many people were like, I've done this, and now I never will go back. But I I tried it pretty extensively, and I hit too many situations where I'm like, I need this to be more flexible For me, like, I need this I need the individual elements to take control a little bit more. So I'm interested Yeah. In seeing your ultimate Vertical grids layout margin setups. What what what kind of has stuff have you done that makes it very flexible and easy for you? What's your favorite path forward for this? And just what are your thoughts? This is a combo conversation. There's no right or wrong answer here in terms of what is the ultimate way to do margins. There are just a bunch of different ways. Alright. That's it for today. Thanks, everybody, for tuning in, and we'll catch you on Wednesday.

Wes Bos

Peace.

Scott Tolinski

Peace.

Scott Tolinski

Head on over to syntax.fm for a full archive of all of our shows.

Scott Tolinski

And don't forget to subscribe in your podcast player Or drop a review if you like this show.

Share