Padding in CSS :
Padding is use for generate space between elements . We can make space between any elements and anywhere with that. There are padding available in top, bottom, right, left.
Padding Top:
Padding top will make space top of your elements.
Example :
<div id="img">
<img src="jpg.logo">
<img src="jpg.cover">
<img src="jpg.profile">
</div>
In CSS file:
#img{
padding-top: 10px;
}
That will make 10 pixel space at the top of every elements in the div. We can do it with any html elements.
Example :
<div class="para">
<p> This is a paragraph. </p>
</div>
In CSS file:
.para{
Padding-top: 10px;
}
That will make the paragraph 10 pixel space at the top of the div.
Padding Right :
Padding top will make space right-side of your elements.
Example :
<div id="img">
<img src="jpg.logo">
<img src="jpg.cover">
<img src="jpg.profile">
</div>
In CSS file:
#img{
padding-right: 10px;
}
That will make 10 pixel space at the right side of every elements in the div. We can do it with any html elements.
Example :
<div class="para">
<p> This is a paragraph. </p>
</div>
In CSS file:
.para{
Padding-right: 10px;
}
That will make the paragraph 10 pixel space at the right of the div.
Padding Bottom:
Padding bottom will make space bottom of your elements.
Example :
<div id="img">
<img src="jpg.logo">
<img src="jpg.cover">
<img src="jpg.profile">
</div>
In CSS file:
#img{
padding-bottom: 10px;
}
That will make 10 pixel space at the bottom of every elements in the div. We can do it with any html elements.
Example :
<div class="para">
<p> This is a paragraph. </p>
</div>
In CSS file:
.para{
Padding-bottom: 10px;
}
That will make the paragraph 10 pixel space at the bottom of the div.
Padding Left:
Padding left will make space left of your elements.
Example :
<div id="img">
<img src="jpg.logo">
<img src="jpg.cover">
<img src="jpg.profile">
</div>
In CSS file:
#img{
padding-left :10px;
}
That will make 10 pixel space at the left of every elements in the div. We can do it with any html elements.
Example :
<div class="para">
<p> This is a paragraph. </p>
</div>
In CSS file:
.para{
Padding-left: 10px;
}
That will make the paragraph 10 pixel space at the left from the div.
Padding Shorthand:
Normally if we don't have to specify the side that's means if we need padding every side of the elements then we can do that:-
Example :
<div class="app">
<img src="jpg.logo">
<img src="jpg.cover">
<img src="jpg.profile">
</div>
In CSS:
.app{
padding: 10px 15px 20px 30px ;
}
And that will make those image 10 pixel at the top, 15 pixel at the right, 20 pixel at the bottom and 30 pixel at the left.
Thats mean it is
{ top right bottom left}👇👇👇
Thats we are writing { 10px 15px 20px 30px}
So the first one is top
Second one is right
Third one is bottom
Last one is left
So instead of writting this👇👇
.app{
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 30px;
}
You can just write that👇👇
.app{
padding: 10px 15px 20px 30px ;
}
Example:
In html👇👇
In CSS:
Output
CSS Part 5: Margin:
Css margin is very important for space outside of the elements. Padding use to space inside of the elements but margin use to space outside of the elements. This is the only difference between margin and padding but their lot more similar.
Margin Top:
Margin top will generate space top of your elements. But just remember that will make outside of the top of the elements where padding makes inside of it.
Example :
<div class="container">
<img src="jpg.mountain">
<img src="jpg.forest">
<img src="jpg.river">
</div>
In CSS file:
.container{
margin-top: 10px;
}
That will make 10 pixel space at the top of every elements outside in the div. We can do it with any html elements.
Example :
<div class="article">
<p> This is a article </p>
</div>
In CSS file:
.article{
margin-top: 10px;
}
That will make the paragraph 10 pixel space at the outside of the top of the elements .
Margin Right :
Margin right will make space right-side of your elements.
Example :
<div id="app">
<img src="jpg.logo">
<img src="jpg.cover">
<img src="jpg.profile">
</div>
In CSS file:
#app{
margin-right: 10px;
}
That will make 10 pixel space at the right side of the outside of the elements in the div. We can do it with any html elements.
Example :
<div class="div">
<p> This is a paragraph. </p>
</div>
In CSS file:
.div{
margin-right: 10px;
}
That will make the paragraph 10 pixel space at the right of the div. But remember it will genarate space at the outside.
Margin Bottom:
Margin bottom will make space bottom of your elements.
Example :
<div id="logo">
<img src="jpg.logo">
<img src="jpg.cover">
<img src="jpg.profile">
</div>
In CSS file:
#logo{
margin-bottom: 10px;
}
That will make 10 pixel space at the bottom of every elements from the div. We can do it with any html elements.
Example :
<div class="para">
<p> This is a paragraph. </p>
</div>
In CSS file:
.para{
margin-bottom: 10px;
}
That will make the paragraph 10 pixel space at the bottom from the div.
Margin Left:
Margin left will make space left of your elements.
Example :
<div id="web">
<img src="jpg.1028v29sjwk">
<img src="jpg.c72ps9292/29r">
<img src="jpg.storage/img/293">
</div>
In CSS file:
#web{
padding-left :10px;
}
That will make 10 pixel space at the left of every elements in the div. We can do it with any html elements.
Example :
<div class="blog">
<p> This is a paragraph. </p>
</div>
In CSS file:
.blog{
margin-left: 10px;
}
That will make the paragraph 10 pixel space at the left from the div.
Margin 0 Auto:
Margin 0auto will centralized every elements you will set. If you got any problem to set elements centet with align-item: center you can easily use margin 0auto.
Example bellow 👇👇👇👇
Margin Shorthand:
Normally if we don't have to specify the side that's means if we need margin every side of the elements then we can do that just like padding:-
Example :
<div class="photo">
<img src="jpg.logo">
<img src="jpg.cover">
<img src="jpg.profile">
</div>
In CSS:
.app{
margin: 10px 15px 20px 30px ;
}
And that will make those image 10 pixel at the top, 15 pixel at the right, 20 pixel at the bottom and 30 pixel at the left.
Thats mean it is
{ top right bottom left}👇👇👇
Thats we are writing { 10px 15px 20px 30px}
So the first one is top
Second one is right
Third one is bottom
Last one is left
So instead of writting this👇👇
.app{
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 30px;
}
You can just write that👇👇
.app{
margin: 10px 15px 20px 30px ;
}
Example:
In the html page👇👇
In the CSS file 👇👇
