Margins

Monday. Monday. Monday.

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,

Boss, and Scott

Tell.

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.

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.

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,

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.

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.

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.

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.

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.

Thank you, Century, for sponsoring.

We are also sponsored today by Auth0.

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

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

You can do everything you need to do to authentication

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.

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

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.

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

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.

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,

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.

Tell me about margins, Scott. So okay.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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.

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

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.

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

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.

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.

Everything just becomes overall more predictable.

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,

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,

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.

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.

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

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.

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

Yeah.

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.

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.

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

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.

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.

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.

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

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.

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,

pretty nice. Not a bad idea.

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.

If I need a little bit of spacer div,

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.

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.

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

as the value.

Can you use attribute CSS? Do it with

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

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

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

Does it work, though?

Can can we actually do this?

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

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.

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

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.

Peace.

Peace.

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

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