Margins and transitions

- [Rik] The moment that we have our Portfolio, About, and Contacts really close to each other, and the reason for that is if you look again at our index.html, they're just text elements and then this space in between them isn't there. We kinda wanna post them away from each other, but how much? Well, if we look again back at our Figma file, if we go to our Portfolio, inside of Navigation, and go into my Contact, About, and Portfolio. And I can see there's a gap if I press Option or Alt, and see there's a 32 pixel gap between each one on the left.

Now, the reason why it's on the left, again, is if I go back to my grid and just show it. This aligns to this corner and it's just pushing each one over by 30 pixels. This one isn't pushed to the right, it's pushed over to the left. So what I wanna do is add a gap on the left-hand side of each one to push it over a little bit more. Now, what we'll do is we'll add something called a margin that pushes things away from each other. Now if you look in the code in our CSS already you might spot margin up here.

We're gonna talk about that one in a minute. But what we're gonna do is in our tag, is we're gonna push them apart a little bit more. So, underneath here, we're gonna add in a new one called margin. So I'm gonna write margin, and then colon, and a semicolon will appear. And what I like to do, this is personal preference, we can do margin-left which is another CSS style. What I wanna do is go around clockwise, from the top, right, bottom, left.

So, top, right, bottom, left. How much margin is on the top? Well, from here there isn't anything on the top. On the right, there isn't anything there. On the bottom, there isn't anything there. It's only on the left. Now, I'm gonna just do this for the links. Notice this purple box popping up. This is what I'm really gonna focus on. So I jut wanna push 'em over on the left. So on the top, they're zero, space.

On the right, they're zero, space. On the bottom, they're zero, space. On the left, there's 32, but what unit? Well, there's pixels. We're working with a browser so I need to write the word px. No space, just 32px. So what I'll see now, is if I go back to my project we'll see this gap of 32 appear between each one that adds some space between them now. So what I can also do as part of this is add some kind of transitions.

I can add some movement as part of this as well if I wanted to. So, just to show you what I mean by that, let's say on hover I wanna increase this margin. It may not work (chuckles) very well just because it looks a little bit ugly on hover. So let's just add this in. Let's say I want to increase this margin on the left. So, margin on hover, is gonna be zero, zero, zero, 64px. We'll double this one up here, just on hover.

So what I'll see now is just on hover, this margin is going to increase. So now, what I'll see if I hover here, is it'll switch back and forth and it'll move each ones around as well. Now if I kind of do it here, notice it kind of starts to flicker a little bit, and that's because it's kind of flicking between the two. How do we add some movement in? So what I can also do a default on my tag is underneath here I can add some transitions in.

So, a transition can go on any of these things, color, text-decoration, margin. I wanna change the margin. Margin, space, over how long? Well, I wanna do this over 1x, one second. So now what will happen when I hover on the tag, it'll go to this, but the transition will be here by default so when I hover off the tag, it will also transition back the other way. So now, it will move like this. Which is pretty cool.

Now again, if I kind of have this in space, you know you kinda see it flicking between the two. Now, obviously I don't want to change the margin. I actually wanna change the color in the end. So the transition, I'm gonna change from margin to color. I wanna change this color from this white color to this one. I'm gonna get rid of this margin, 'cause it kinda sucks. Woo hoo, have it in there anyway. So what we've got now is color, text-decoration, and margin, and the transition. And the only thing that changes on color is, oop, the only thing that changes on hover is the color.

So, what we'll see now is if I change this, it'll fade into pink each time. There we go. Now it might feel a little bit too slow so what we're gonna do is just increase this from one second to 0.3, let's say. We'll try that out and see how that looks. There we go. It feels a little bit more natural now. So what we've done is added in both a hover state, we've moved things apart with margin, and also added a transition in here.

Now, the next thing I'm gonna talk about is margin on a bigger scale. How do we set up the layouts of this page to look like this?