Block, Inline, and Inline-Block explained | CSS Tutorial

hi there and welcome if you're new here my name is Kevin and here on my channel we learned how to make the web and how to make it look good with weekly tips tricks and tutorials and in this video we're going to be looking at one of the more basic things but something I do get questions about and recently I actually saw a bunch of questions about it so I want to go into a little bit of detail on what block inline and inline block are what the differences are and why it matters and when you might want to actually switch the display property of something and why it can be useful in certain circumstances so let's jump right into it alright so let's take a look here in vs code and get started at this and look at the differences between block inline block our block inline and inline block and right now what we can see is I just have a very simple example on here right now and we have a bunch of blocks so one very simple thing is most things are blocks almost everything is a block so one example of a block is a paragraph and a paragraph if I come on here in a give an outline of three pixels solid red just so we can see them there and we can see I get these boxes that show up around my paragraphs so this is highlighting the actual paragraph and you'll notice even though my text is stopping here it's forming a complete block that goes all the way across the slide even with this empty space Here I am using outline here just because a border will add to the total size of things I don't think it's a big issue in this case but its outline is a nicer one to use instead of borders if you're trying to debug or do anything or you don't to actually impact the the layout of anything so that's why I did that I do have a video that goes into that in a bit more detail if you do want to check it out so an important thing to know about block level elements is block level elements always stack on top of each other even if they have room to go next to one another but by default actually before we even get to that by default they do have a width of 100 percent meaning they take up all the available space as they can so here if I make this bigger they're gonna keep growing or shrinking the only thing that's limiting their total size is their parent so the parent has a size on it it has some padding so it's limiting the size of those paragraphs and the width of those paragraphs but the width of those is at 100% by default now even though they're 100% we do a width of 50% on here there's still not in next to each other or even let's make it like let's make it like 25% because then there would be room for all three to go next to each other but we can still see they're not going next to one another still stacking one on top of each other because they're block elements so they will always stack one on top of each other they force a new line of content automatically and this is a really good thing because if it wasn't that case let's take off my outline of my whip here imagine if a paragraph didn't start a new line and they just started the next thing just started over here well that would be terrible right that would be super awkward well that's what inline elements are for and inline elements are for when you don't want a new line of text so something like our links that we have here or if you had strong or em tags just to name a few there are quite a bit of them so let's actually will turn our red outline on there so we can still see that and I'm gonna go on to my a and we'll give this an outline as well we'll do an outline of three pixels solid I guess we'll go with three the orange or worth working that should stand out I'm compared to to the other one we had on there and now we can see that these all these links here have boxes around them as well but the boxes are starting where the link starts and they're stopping where the link ends on like the paragraph or it would stretch all the way across and actually it's shorten that last paragraph up let's make that last paragraph really really short and there we go so even though this is a really short paragraph it's taking up that whole line whereas these links that are in line elements they're only taking up the width of the content themselves and that is a big distinction between block level and inline and the other one again is that block level elements will always force a new line of content and again this would be good with a paragraph you wouldn't want another paragraph squeezing in because there's empty space available so they don't do that they always stack one on top of each other whereas our links here they're links are sitting at the width of them and that doesn't matter if it breaks across one or two lines when it's an inline element it's always going to just be its own width and it's gonna make a box all the way around it now one really interesting thing here is there's actually these things called anonymous boxes that are getting wrapped around all this other content now it's not terribly important to know this but they are we are getting boxes around the other content here but there's no way of selecting it so it does really change your life in any really big way but it does have a little bit of an impact and the reason it does have an impact is let's say these links had a height that was bigger than the these other things here that could cause problems right and it's one of the reasons actually on inline elements you can't give them a height so if I you height 100 pixels nothing will happen or if I do a margin top 200 pixels nothing will happen so I'm saving here we're refreshing nothing is changing margin bottom 200 pixels nothing happens or padding top same idea 200 pixels nothing or padding bottom all of that no impact whatsoever the well the paddocks already the padding top and bottom did have an impact there you can see the outline is gone a little bit crazy but it won't actually impact your layout at all I'm gonna turn these off because that just makes things confusing to look at and we'll get back to that in a second actually but what one of the reasons they do this is because imagine if you could give links a margin bottom that's bigger than the text around it that would be really awkward it would cause just some problems to happen and this is a little bit where those anonymous boxes come in because one thing you can do is you can make your link or any inline element have a bigger font size than what's around it and that will increase its height so if I say 300% on here my links will become really really big and I'm gonna focus more on this bottom one here because looking at this bottom one what's happening is you'll notice that it's pushed everything around it here so the anonymous box that's around this is giving this a height that's actually the same as here so the box the anonymous box here is balancing that out and that's gonna stop this line of text from sort of having to wrap around it or I guess go I don't know what would happen really since we don't live in that world I don't know if we're going to need or whatever it is but those boxes do exist but it's important to know that generally speaking you can't really affect the height of inline elements and they do that on purpose because if not this weird stuff happens where you know this looks terrible so I wouldn't suggest doing something like that and again you can't select these anonymous boxes so they don't have a big impact in your life I'm you know I don't know hopefully I'm not confusing you too much with that um now so that's block level elements they always force a new line they can accept margin and padding top and bottom and it will work and they affect the layout whereas inline elements they live inside of other things and they don't force new lines and you know again I would suck imagine giving a strong tag and then that forced a new line of content it just wouldn't even be usable so inline elements they run inline they you know it flows our text along it prevents text from breaking very very useful but what happens if you need an inline element that can also have padding and margins on it that situation does arise itself quite frequently and that's where inline block comes in so so the example that I like to give for this is when when you style links as buttons so I'm going to do a link here BTN so I have a link with a class of BTN I can never go anywhere and will just say I am a link slash button there we go and we get it down there and we have the class of BTN on here so when I come up to here and let's select that BTN and actually we don't let's turn off all of this for now because I think it's gonna get in our way and the shortcut buyer for commenting out code by the way in vs code because people always ask me when I do this is control /or if you're on the Mac could be command forward slash I'm writing this in an S CSS file so it looks like a javascript comment right now but if you're in regular CSS it would just do a regular CSS comment block around all of that instead um so my dot BTN let's give this a you know you want to make it look like a button or you know something we can click on so let's give that a background of light blue a color of oops color of black padding we're gonna make it really big we want a big button so let's make give it a padding of like 75 pixels and left and right you always want the left and right padding on a button to be bigger than the top and bottom to make it actually look balanced so we'll make this like 50 this is a massive button we're gonna do that text-decoration:none I'm sort of doing this deco declaration none was that enough let's hit save and see and okay there my buttons coming in and maybe we should give this a hover State and have you noticed the problem let's come up right now there is a problem that has appeared my buttons working my giant button is working but hey it's it's interfering sort of with these paragraphs that I have here hmmm what's going on so remember when I originally gave the padding to my links and those outlines sort of went crazy it's a little bit the same thing that's happening here I'm giving an inline element padding and we saw actually just really fast let's say you that happened to you and he wanted to push it down there you go margin top 200 pixels to try and give it some room and it doesn't move so this is the same thing I did before I gave this the links a margin top and it didn't work so what's happened here is I'm giving it the margin top it's also not working because even though I'm trying to make it look like a button this you know it's still an inline element and padding interestingly enough applies to the element but it doesn't actually affect the size of it because you can't give inline element Heights so you know the padding top and bottom here it's it's showing up visually but it's not actually doing anything it's not affecting the layout it's not it's just getting in a way pretty much so this is where things you know you might come in and this is where it's useful to use display:inline-block and that's it save on that and boom now my margin top is working and if I took my margin top off because we don't really need it anymore we can see that the padding is actually influencing it so if I took off my padding my buttons really small the margin here is just the normal margin from my text but as soon as that padding goes on it's actually being included in the size of that button so it's your my my gigantic button here so it prevents things from overlapping one another and you might be going well what's you know what's why not just use display:block and so yeah okay let's go try that out there's two things there gonna happen one of them is the size of it is gonna go screw with because it's going to try go to 100% so then it just becomes more annoying to work with and the other thing though is if you wanted to have multiple buttons in a row and this is obviously a very common design pattern where you end up with multiple in a row and I'm saying buttons these are links that would be going somewhere else that we're styling to look like buttons but the same could hold true for actual buttons as well so here my I could do like another one here and I want these hopefully my text isn't too long on that they were lumps but I have one more we'll try that instead oh there's still not enough room okay that's making these a little bit bigger smaller let's make this a bit more realistic we'll do like 25 pixels 75 pixels there we go so these look more like you might with the regular button and you can see they actually go next to each other so remember even if these were a display block instead and then they stretched you need to hold on to work to stop it from stretching to full size and you fought that I would still end up with them stacking one against one after the other and then you'd have to find a way to get them to go next to each other and you know do you really want to get into that are there ways of course there are you could start using display flex you can start using floats but my goodness would be getting complicated for nothing in that case so that's why I like using inline block for this so with inline block what you're getting is the ability to set margin and padding the same way you would on a block level element or height and stuff like that if you needed it but also allow the elements to not force new lines so they're inline in the sense that they go next to one another but they are block in the sense that they can have height and margins and padding's and all of that on all their sides inline elements can have margin and padding left and right that will affect things but not top and bottom whereas as we can see now the inline block do if you look at something it's behaving a lot like an image actually and images are actually inline elements but they're replaced elements I'm not going to get into the details of that but they pretty much any replaced elements such as an image or I think an iframe and a couple of other things they are replaced elements in that it's you know the content of it gets not worry about what a replaced element is but they will behave just like an inline block element in general which is why if you put like four images they'll go next to one another but images 10 obviously have a height and a width to them so technically speaking they're in line but they're behaving just like an inline block element does also I'm gonna link down below to something that's really interesting just because while I was researching this just to make sure I had all my facts straight before making this video the I've came across that we can have a tour they're starting to introduce a 2/2 value syntax to the display property which is interesting I was thinking about talking about it in this video but in general I want to target this more towards beginners but if you're someone who's really into the whole world of CSS it could definitely be a really interesting read I think that's it for this one thank you very much for watching if you do want to see that video on outlines how they're great for debugging and some other awesome things you can do with it the video for that will be linked down in the description below thank you so much for watching a huge thank you to my patrons for helping support everything I do here every single month you guys are absolutely amazing and of course until next time don't forget to keep on making your core of the Internet just a little bit more awesome

Channel: Kevin Powell

Views: 231,308

Keywords: Kevin Powell, tutorial, html, css, css inline, css block, css inline-block, inline block inline-block, difference between inline and inline-block, difference between block and inline-block, difference between inline and block css

Id: x_i2gga-sYg

Length: 14min 18sec (858 seconds)

Published: Wed May 06 2020