Setting Borders, Margins, and Padding with CSS

Learn how to add borders, margins, and padding through this fourteenth video of a beginner's guide to HTML and CSS!

TRANSCRIPT:
Alright, so before we begin, I just wanted to draw your attention to this diagram which shows how margin and padding play a role in your webpage. So, we’re gonna start off with the innermost box which is your content. So that’s gonna be a header, paragraphs, images, really anything. This is what you’re going to be mainly looking at. And then the space around that is called the padding. So the padding comes in between the content and the border. And the border can be made visible by setting its properties in CSS. And then, after the border you have the margin, which really sets this element apart from another element.
Now let’s go back to our webpage, and you might remember this from a previous video. Let’s just run it and see how it looks. So it just has a simple line of text and three icons. Now let’s encase all of these icons in a div element, and give it the id of icons. So we’re essentially putting all of these in the same container, and let’s indent this. Now we have our div, and we can access it here by using a hash symbol because it’s an id, and then icons. Now we can alter the padding and give it a padding of, let’s say, 20 pixels. Now when we save it and run it, you’ll see that it has more of a border and it isn’t squeezed all the way to the side like this “I like sushi” text. It has a little breathing room. Now let me put in the border, which will have a width of 2 pixels, and it will be a solid border, and let’s make the color black. Now let’s save it. And now you’ll see that the border is all around it and there’s space between the first icon and the left side of the border.
Now when I remove the padding, you’ll see that the icon will be lined up to the very left side of the border. So it’s important to have padding to increase the readability of your webpage. So let’s go back and add in that 20 pixel padding, and let’s also add in a margin of 20 pixels. What that will do is, it will increase the distance between this “I like sushi” line and this border. And there will also be some space between the border and the very left side of the webpage. So let’s save that and run it.
This entire space is going to be the margin, and then we have our border and we have our padding between the content and the border. Another thing we can do to fix up the border and give it a nicer look is give it a border radius. The border radius basically rounds the borders so you can get a more curved border. You can put in any amount of pixels, so 10 pixels will give it a slightly curved border. And if you wanted to make it an oval, you would do 50%.