Margins

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 don't forget to subscribe in your podcast player Or drop a review if you like this show.

Peace.

Peace.

for a full archive of all of our shows.

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

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.

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

Some of those other issues that we're talking about, like the margin escaping

So

a a container.

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.

what I've done is I I I wanna maybe Can can we actually do this? so I I made a a spacer div component 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?

pretty nice. Not a bad idea.

or margin bottom. Right? Yeah. As my my defaults.

In

I've I've taken down a system where I have essentially padding bottom, And the common technique is to use margins for this. This is kind of how it's been done forever. And

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, I've adopted the spacer dip. I'm gonna say that.

in fact,

And in our modern Head on over to syntax.fm

Stack Overflow question, HTML stripped or sorry. CSS stripped from a document, and you have that base.

1 minute maybe where I said it said Oh, did you say that? Sorry. I was

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

CSS calc and the Attribute? I don't think you can use the attribute

Does it work,

a if you want to grab on to that spacer div, 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

A class and then, like, an inline CSS variable,

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.

Yeah. Me of being in space. You know? I'm trying to think. Like, could you do it with the, is important as much as you like to

a 100 p x times And that allows it to be part of the component itself,

ATTR.

And it says calc, 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

Can you use attribute CSS? Do it with

the way. I'm I'm just looking at

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

though? that's a nice rule because it it doesn't like, the padding only, Have you ever tried to

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

grid for everything makes more sense to me because you kinda get all the benefits of the Flexbox Type of vertical situation, So 2 the 2 full on tutorial courses to cover all of that. There was, like, But,

you can use GAP for spacing.

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.

They have SDKs

You can do everything you need to do to authentication The biggest problem here is, like, what we mentioned, there's a lot of weird kind of, 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.

You can use they have features such as next level,

They handle authentication Is that a word? Customizable.

authentication.

customizable? 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,

and permissions in your application. You can log in with social providers. You wanna log in with Twitter or Google. You have customizable

user management, including roles and permissions and multifactor

external service and let them handle it. And for you, it's definitely authentication. Go to a zero dot t o forward slash syntax

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

Authorization

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

in your application so you don't have to.

That's a lot to think about. Yeah. Let me tell you, as I did 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.

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

45 videos to teach you how to do all of that. No kidding. If there's something you need to use,

Tell me about margins, Scott. So okay.

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.

choice. I don't know about about US, but it's always felt like a weird thing. Yeah.

And so I've really, work in layouts. Right? Sure do. We're we're getting things vertically, horizontally The big issue I have with this is gonna be the same big issue I have with the grid for everything.

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.

whatever, just littering your code.

Yeah. Collapsing margins are are like a lesson onto their own. It I think it makes sense 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 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.

you know, you can get away with just doing straight up normal top bottom margins and and working with the collapse, Everything just becomes overall more predictable.

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, or Virtually on September 28th, then discover all the ways to make your life easier. Save your seat now. Century.ioforward/eventsforward/decks.

Or what is that? Nonbreaking space

in whether that is through margins or elsewise. So the first one is just margins. And if you understand how collapsing margins work,

I gotta say, like, the wrong design

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?

I've listed a few techniques in this episode that we'll talk about as Ways that you can do margins 2 spaces,

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,

And that, to me, always has felt, weird situations that you can get yourself into something getting pushed down here, and it's like a child of a container's margin.

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.

Yeah. It won't make matters worse if you have, like, containers 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 as the value.

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

have things take up specific amount of size

And

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,

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,

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,

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,

Who would have Thought that we'd have an entire show on just margins, but, honestly, it's been

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.

And as far as, like, CSS, Like, a whole bunch of premade classes generated. Oh, yeah. Yeah. Tailwind. Right? Where I'm saying,

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

the talk of the town lately. I think even margins,

Welcome to syntax

is Wes, the margin boss.

Ideally, have everything exactly the same.

Yeah.

in intermixed in between things and it's not a standard layout,

Yeah. I could I could see somebody

layout. But as, like, a generalized 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 Have you ever tried to do only padding and no margins? 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, I think if you're choosing grid or Flexbox for everything, one of these strategies, like, footguns go, they're they're pretty high up on the list in 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.

specific

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

design system layout tool, this one seems like tough to me Dealing with different types of gap between different types of elements.

then it's just 2 times 40 is 80. If I want 1.5 spaces, it just does all the math for me. So,

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

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.

default value minus 40 pixels. So for me, 1 space is 40 pixels. If I want,

whatever that 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, Everything gets a grid container. So anytime you need to space out anything vertically, you use Yep. Essentially.

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

For this configuration option. Right? 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.

So if I had it as a class, you'd have to have, and

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

Tell.

Monday. Monday. Monday.

web development treats coming in hot. Here is Wes, Barracuda,

Boss, and Scott

We we 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,

laid out. We're laying them out. 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.

But like you mentioned, like, 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? 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.

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, for this event in San Francisco

Because, of A container should always have margin top 0.

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.

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.

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

And, also, like, many times, You end up having to override things. Right? If you're setting margin top and bottom on many elements, one thing that you always have to do is space things apart. Right? Something I've recently been diving into quite a bit in our design system, 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, they want you to know about it. It's actually gonna be on 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, where you wanna shoot something to the bottom like a, 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 It's nice and simple. It couldn't get any easier than that. And, On this Monday hasty treat, we're gonna be talking about margins and CSS and techniques in your layouts for dealing with margins.

Now Sentry has a new conference called Dex, 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.

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.

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.

September 28th in San Cisco, you can attend in person or virtually, 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, 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,

Join Sentry 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 you can find out more at century.ioforward/eventsforward/dexor.

We are also sponsored today by Auth0.

Thank you, Century, for sponsoring.

not at a component level. Is is that kinda

only put them so only do padding,

Then that should be done at a layout level, when you have

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,

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.

do Anything, you have full control over it because it's a proper element, you know?

If I need a little bit of spacer div,

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.

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