Why can’t I add margin or padding to the top bottom of my a tag Inline vs block elements

Hello frustrated people, we can't add margin to the top of our button. We've installed an A-tag and we want to push it, either from the top margin or the bottom margin, but it's not working. Why is it not working? It's because the display property is set to Inline. So the quick version of this video is just put Display:Inline-block on your button, and make sure you save it, and then you can do it. Hang around for this whole video because we're going to talk about the different display properties, Block, Inline block, Inline, and we're going to do some fancy CSS, where we connect a couple of Classes in a tag together. You ready? Let's add Top margin to a button. 

So remember, in the last video we had problems, putting padding, sorry, margin above this. It's something to do with its display property. So I created this like little throwaway bit of HTML. You don't have to do this, you can play along if you want, but it's just a plain old text, a HTML document. We're going to talk about that main, there's lots of display properties. We're going to talk about the main ones, that will affect you as a kind of a beginning Web Designer, which is Inline and Block. So there are some things that are displayed by Block by default. What that means is, let's look at a P-tag with some text. Actually let's add a chunk of text, so Lorem, I'll put in 50. Another one is H1, that's by default what's called our Block Level, and all this really means is--

Let's add a couple more, I'm going to put in an Unordered List, which is a Bullet Point List with some List Items, but I want like 10 of them. And inside of this, I'm going to put in items. So these are all Block Level, what that means is, if I look at this, can you see, that guy pushes that guy down on to his own line. It's his own block of stuff. This guy is a big block as well, all of these guys have their own little block. They push each other over, the opposite for these guys are Inline, and they're useful for things like, let's say an A-tag. So I'm going to put in A-tag, and this one's going to hash, '#', and it's going to be my Link, and it's an Inline, which is giving us our problem. 

The difference between Inline is, can you can see, it didn't push everybody else away. It plays well with others, it works in line, whereas Block says you have to be in your own line, own line, Inline. Same with an image, if I need to add an image here, so IMG, the source is images/, put that one in. I'm going to give it a size, give it a height, at least it's not too big. You can do heights kind of in the HTML, which is kind of weird. It's in line, so you can change them around. You can say, actually, I would like up here in my Style-- I'm not using a CSS sheet for this particular one just to save some time. 

So I'm going to say I want the images to be, image, please, to be Display property of, let's be Inline Block. Actually no, to be Block. You block things out, you are now all by it, doing his own thing; cool. So one of the properties for say an A-tag here, because it's Inline by default, is that you can't put a height, you can do left and right. I can say, actually I want an A-tag, that has-- I want a big old margin on the right. So Margin Right, that works perfectly, 200 pixels. Let's have a look. 

So it's got a big margin to the right, but I can't do a big old margin to the top, which we already know from our last video. Let's go 100 pixels to the top please. "It doesn't do anything, you're like, doesn't push it 100 pixels down." What you can do though is you can say, actually, A-tag, I'd like you to stop being Inline, and I want you to be a display of, I don't want it to be Block because Block in this case, would kind of not do what I want it to do. Ah man, having trouble. Come on, there we go. Because it's kind of pushing down to its own line, you're like, "Actually it's kind of what I want, I want a bit of the in between." And the in between is, I want you to stay Inline, but also be a bit blocky, that does a bit of both. 

Basically what it's going to do for us is it's going to stay in line. So it's still on that same line as our paragraph. Let's get rid of the Image tag. He's making everything look a bit confusing. So stay in this paragraph, but allow me to do things like Heading or Margin top. So they all have their natural ability, say these List items here, remember these guys really want to be on their own lines. They're called Block Level. They're actually called-- what are they called? I've got a special one for them, so List items, we're going to say Display, please. They've got this one called, there he is there, List item, which does the same as Block with a few extra perks. So instead of being Block I want you to be Inline, and let's have a little look at what it does. 

See the little List items, all stacked on the same line now. So there'd be lots of times where you need to leave it as the default, occasionally though you're like, actually just be part of the gang, I want an H1 with the P-tag right next to it, because I've done some cool design stuff, and I need to implement that, whereas Headings really want to be on their own line, because they are Block elements. Does that kind of help to recap? 

A-tags by default are Inline, which means they stay on the same line as everybody else. P-tags, H1s, Block, there are display block property, so they'd all be on their own line, but if you want a bit of both Inline-block is a great bit of both, bit of Inline, bit of Block, and mainly what it's going to allow us to do now, is we're going to go back to this page, click you, click you, drag them around, you go here. Is I'm going to say to my - where are you? - my button, I'd like you to be-- now I'm not going to do it for all of them, because I could say at the top here, I want all A-tags to be Inline Block, but I'm not committed to, you know, I don't want to do that for all of them. I'm just going to do it for this one, and you're going to be Inline, Block, Inline Block. 

Now I get to do a margin at the top. Margin top. And where am I going to put in? I have no idea. 20 pixels, let's have a look. Not this one, it's a genius. This one's not working. 'Save All', let's have a little look. Still not working, my button. So it's not working for the Class applied to my A-tag. So what I'm going to have to do is say, actually, I want there to be an A-tag with My Button applied, this is still not going to work. Oh, this is a good juicy bit of information. So if I grab these two, and I say, you, I'd like you to do that, it's probably still not going to work, still not, because what's happening is, what it's looking for in terms of the selector that I just made, is it's saying, I want to find a My Button inside of an A-tag, but it's not inside, I've got an A-tag that is my button. 

It's not inside of it like we've done in the past, we've got an H1 that's inside Hero Box, that is inside my Main, they're not inside of it, it's actually just an A-tag with a label of my button. So how do you fix that? It's weird, spaces means, kind of shows you, like this kind of bread crumbs of like, My Button is inside of the A-tag, whereas if I join them up, so there's no space between them, it says, an A-tag that is a My Button, apply this stuff. Let's save it, see if it works, still not working. Come on, it's still not working. 

What else do we do? All right, I had a brain bender there, and I'm leaving it in the course because it's really usable brain bender. I thought I knew what I was doing, I was like, "Yeah, so just do this, and we can join them up", and that's why it was broken, and it still wasn't working. The reason it wasn't working, like I was adjusting this, I'm like, "Man, that works, I was checking syntax." The reason it wasn't working, code was perfect, it was because we did this little throw down course, I opened this up, remember the little tester one, I opened it up, and kind of tested it in the browser, and I'd made a connection between VS code and this page. Then I just closed it down and went on my business, and went on with this one and closed it down, and then I started, and then what I didn't realize, well, what I forgot is that, that connection, that live connection, got broken between my original page here in VS code, because I kind of went off and did something else. 

You can only kind of tether to one at a time. So now I'm hacking away at this, going, scratching my head, going, "Tell me how this works." It's because I, yeah, went to this other page, previewed it, now I'm going to have to close it down, open it back up, so that the tether and connection between my new, well, the existing site, now show it to me. A bit flustered, I am. So now it works. 

So we learnt a few things, I want to wrap it up, and I want to leave in the badness in there, just, you'll run into that problem, and it's one of those things where you're like, "Oh, it's just not working, I'm going to bed", and you wake up in the morning, and it will start working, you're like, "It wasn't working last night, I promise." It's because you've closed down and reopened that up. 

So we learnt a couple of things, we learnt about displays, and we displayed block, which is our kind of Block Level stuff. That's why we said Block level tag selectors when I've been talking. You got Inline, which is things like our Image tags and our A-tags. There's lots of Inline attributes elements, but there's some of them do a bit of both. That's what we wanted in this case. I want my button to allow me to do some margin on the top. 

The other nice thing we worked out was this other bit of way of writing CSS. So we've done commas, we did it here , where are we, commas, we said, I'd like you to target Card1, and Card2, and Card3. So commas do the ends, if you put a space between things, I'm trying to find one that has a space now, there's got to be one. Do we even have one? We do. So I want P-tags inside of cards, and apply this stuff, but only if there's a P-tag inside of it. This one here is, I would like an A-tag with this Class applied to it, and you can kind of use that, like it's applied to it literally, like it's stuck right next to it, it's applied to the side, no space, space bad. And we also learned, you need to reset your browser, preview, if you jump between different projects. Go back, Dan, get lost in front of people. Hope it's-- well, you will use it as a learning experience, that's what I'll call it. All right, on to the next video.