Welcome to your website development training center. Today we gonna learn 3 things.
1. Padding
2. Border
3. Margin
Let's start with padding, whenever you have an element on your webpage, let's create a new file and save it with pbm.html
Copy this 👇 and paste it in the empty text editor
_____starts from <!doctype html>______
<!doctype html>
<html>
<head>
<title>TopCrix Studio</title>
</head>
<body>
<h2>I love my country</h2>
</body>
</html>
______stop at </html>______
Let's preview, whenever we have any element basically on the screen, we looked at the element and say this is a text on the screen, right? But this element actually consist of four different parts. We already have the text (the contents) and what we don't see is the 3 other parts and that's because they are white right now, they kinda hard to see but actually.
But we actually have the content, the padding, which we are going to study in this tutorial, if you highlight your text by pressing it down for about 2secs or so, you will see a blue shadow like this 👇
If we draw a box around the text to make a border, the padding is the space between the text and the border and that brings me to 3rd part which is the margin. Margin is the space outside the border.
The first thing to be able to view or set our padding is to change the white padding to a yellow background and to do this we only need to select the element we wanna work with, which is the h2 and add a property background-color and set the value to yellow or pink or orange but don't use color that's too dark because we already dark text.
I'm gonna use yellow.
Now it is easy to see some background other than white, which makes us to see the content, we don't have a lot of space at the left side of our content.
So, let's say we want to add some space between the text and the background. And in other to that, you can either use one of these 2 ways, you can either change the overall padding by typing the word padding and set it equals to value like 20px
Like this 👇
You can see now that we have a nice little pad between our texts and the edge of our border and that is 20px on all sides (20px from the bottom, 20px from the top, 20px from the left, and 20px from the right even if the space to the right is like 100px because of the width of the screen of our webpage)
20pixels all the way round, right? so right now you basically know what padding is all about, it's the space between the texts and the border of wherever you working with.
Maybe you don't want your padding to affect all the side of your texts,maybe you only want it from the top or bottom, in other to do this typing just 'padding' will not work because it gives you padding all the way round, you need to use either of these four keywords;
padding-top
padding-bottom
padding-left
padding-right
Let's take padding-top for example, let's go ahead and put 30px and also padding-bottom we can put 20px
Like this 👇
Now we have 30px of padding on top and 20px from the bottom and no padding to the left. Whenever you wanna place a text or an image on your webpage in a very specific location, you need to use padding, maybe you want a header just a bit to the top right corner of your webpage, try using padding.
