CSS Margin, Padding and Border

Margin, Padding and Border

Welcome back to another lesson in the previous lesson.

We saw that each element is indeed a box with three important properties padding which is the inner

space between the content and the boundary border which is the boundary itself and margin which is the

space outside the boundary.

In this lesson I’m gonna talk about these three properties more in detail.

So let’s start with padding in the last video.

We added padding to the header element that increases the inner space from all four sides.

Likewise we added the margin that increased the outer space from all four sides.

And this is because we provided only one value which is 50 pixels for this padding.

And again 50 pixels for this margin.

This is actually a shorthand way when we have all four sides of the core lent so typing only one

value communicates that all the four sides that is left right top bottom are 50 pixels.

But how about when we want to provide different values for different sides.

So, in that case, we have two options.

The first one is very straightforward.

Let’s say you want to only specify the left padding value.

So in that case you can provide padding-left property and set its value.

Let’s make it 40 pixels.

Now we have added the padding only to this left side in the same way we can add padding died and let’s

make it 50 pixels then we can add padding-top and let’s make it 60 pixels.

And lastly padding-bottom and let’s make it 70 pixels.

Let’s see it on the website.

So now we have different values for different sites this is the same for margin as well.

We can add margin-left

margin-right

margin-top

and margin-bottom

and likewise we can have border-left border-right both the top and bottom the bottom.

I’ve come to border properties as well in a moment.

So this is one way.

Let’s now talk about the Adobe which is also a shorthand way for different situations and using that

we can save these extra lines.

So let’s try to get the same results as these padding-left right top bottom in just one line.

So I add padding just like I did in the beginning and then I can add four values separated by space

in an order.

The order is that first, we can add the top padding which is 60 pixels then space and then the next value

will be for the padding-right which we added as 50 pixels.

And space again and the third one is padding-bottom which we added as 70 pixels.

And lastly the padding-left as 40 pixels.

So if we provide for values inside the padding property then first one is going to be taken as the top

padding.

The second one as the right padding third one as the bottom padding.

And the fourth one as the left padding so in just one line we can provide all four values so if I remove

the above four lines as I don’t need them anymore and then save.

And then when I refresh.

Nothing changes so this one is producing the same output in the same way I can at the margin property

and set the same values

now you can also provide just three values now this time.

The first value means padding-top.

Same as earlier.

However the second one means left and right.

And the third one means padding-bottom so top padding is 60 pixels right and left ones are 50 pixels

each and bottom one is 70 pixels.

So you can use this method and you have the same left and right values.

I save again and then reload.

Then we have the padding size with the same left and right padding all 50 pixels each next.

If you add only two values and this time the first one means top and bottom.

And the second one means left and right.

So now the top and bottom padding are 60 pixels each and right and left padding are 50 pixels each I

save again and then refresh and here’s the output.

So you can use this option when the top and bottom are the same values and left and right are the same values are

different from top and bottom.

And lastly, if we add only one value and this means that top bottom left right each one is 60 pixels

I save again and then refresh.

Now all four sites have equal padding of 60 pixels.

This is the same for margin as well.

So if I keep only one margin value then all four sites are going to have the same margin the same way.

I can add two or three values as well.

Just like in case of padding.

So these are the different ways you can specify the padding and margin properties values.

Now one thing to remember here is that you should go with this method only when you want to modify the

values of all the four sites Cause whether you keep one value two values three or four values they mean

something for each side.

So when you want to specify the value for only individual sites.

For example, if you want to specify only the left padding and keep all the other padding values as default

then you can better use the padding-left property and set the value.

The same goes for margin as well.

So after the padding and margin.

Let’s now talk about the border properties and we have added the border property within the universal

selector and for the border first we can provide the border thickness of it as I mentioned as one

pixels.

And comes the border style and we get different style options like solid dotted dashed et cetera including

none and hidden.

So the value of None means no border.

And this is also the default value in the browser’s and then the value of hidden simply means that there’s

a border but it is hidden.

So while hidden it’s still there and occupying some space depending upon the thickness that we have

set.

And lastly we can provide the color and the default color is black.

So this is kind of a shorthand method.

But here we have three different values.

Now let me add the border property to this.

Each one element.

So I can add the border and let’s add the thickness as five pixels space solid as the border style space

blue as the border color I save again and refresh.

Now notice that everywhere we have the border as specified within the universe’s electoral map just

for the header each one, the border property is different.

As I just modified so in assess if you provide any property for any element and then if you add another

the property later than the latter one is preferred.

And this is valid for all properties to demonstrate below the border that we just added If I added again

with some different values

then this time if I save and refreshed then we get the later values applied likewise in this case if

you specify the property inside the selector and then provide another value for any other element

like this H1.

Then for that other element the values provided will be applied.

So in simple terms what comes later is applied.

All right so coming back to the border here, we have now eight pixels of it dashed line in blue color

as added inside the H1 element.

Apart from that if I just add the border-color

and set a color then it will override the property and set the new color for all four sites as a workaround.

If I make it border top color then this will be only the border-top color same way we can a border-right

color border-left color border-bottom-color and then for a style we have border-style border Topsail border

bottom style border-left style and border-right side and the same way border of it with border-left

with border-right with border target or border-bottom with.

And lastly, for each one we can use the shorthand like if I use for example border color and mentioned

four colors then just like padding and margin the order will be the top right bottom and left

again it works the same way as with padding and margin in the same way three values means the top color

left right color and bottom color and then two values mean top-bottom color and left-right color.

And finally one value means color for all sides.

Likewise border style and border it can also have 42 or 1 values.

So this is how you can use the border padding and margin values.

Now before we finish I must tell you a couple of things.

Number one we can see the box model of each element on the browser as well.

So if I go to the browser and then click on the right mouse button and then click on this inspect option

and I’m using the Chrome browser then you can see the windows on the right with information about the

page.

And here we have the stylus which will show us the page see assessed properties with their values and

at the same time if you hover over any element.

Well it’s not working but we can click on this cursor that says select an element to inspect.

So I click on it and then the element inspector is now activated and any element I click I can see its

properties.

And within the style step I can see the CSS properties of the web page.

Then this is the box model of the element.

And here you can check the margin border and padding properties and cross-sector values.

You can find a similar option in other browsers as well including Internet Explorer and they are generally

located within the developer tools option and for many browsers including this chrome the shortcut is

f twelve.

So if I close it and press F twelve then also I get to see the same window moving on to the second point.

Different elements already have some preset default margin and padding values like each one by default

has some predefined margin to show you.

Let me first remove all the margin and padding properties from here.

And also remove this border from the universal selector and then save and reload.

Now all the properties from this H1 have gone and now if I check again using the inspector element

it now has border and padding is blank but it has top and bottom margin similarly if I inspect this

the paragraph then the paragraph has no border or padding either but margin.

So sometimes when elements are taking up some unusual spaces then you can check here to find out what

are these values and troubleshoot.

This really helps and you do these different preset values.

You will see many developers mostly adding two lines within the universe’s selector as margin zero and

padding zero.

Margin, Padding and Border

And this way this had all the default page margin and pairing 2 0 and one can simply add these properties

for different individual elements so we now have everything set to 0.

Let me check on the website and you can now see that there is no margin or padding now and it looks

really different.

So these different values are there to give a decent style to the web page.

In the absence of any CSS assessed properties specified.

Now if you provide any properties such as margin to let’s say this H1 element

and then check again and there we have to margin so there can be some preset margin padding or border

values by default for some elements.

And lastly as mentioned here you can set the padding or margin value as zero and you can also provide

negative values.

So if I said the margin as negative 10 pixels and see it on the website then that’s also fine.

So this negative value can also be used when there’s some default value and you want to reduce it whereas

for the border you can set the value as none.

So this was about the padding border and margin properties using which you can control spaces and organize

the elements.

Also, Read –

Leave a Reply

Your email address will not be published. Required fields are marked *