CSS Box Model Explain!

CSS Box model:
As a front End Developer I myself not good at CSS but when I was a beginner in CSS I might get confused between margin padding border such properties because I never learn them properly so in this post I'm going to show you how simple it is.

• An Element: As if you are familiar with HTML then you should know that every html tag is an element. So the first thing that comes in box model that is Element. We can style it using the box model properties or any properties that are present in CSS .

<button class="btn">Cick me</button>

• Padding: Padding is a property for of both sides of the Element, It's basically give space inside any Element. and using Padding property we can make our any element beautiful. it has four different properties padding-top, padding-bottom, padding-right, padding-left;

.btn {
     padding-top: 10px;
     padding-bottom: 10px;
     padding-right: 10px;
     padding-left: 10px;
}

• Border: Border is an property from box model it is useful for making the borders outside of an element also. We can use them to remove the borders that already have on buttons and all that stuff using border: none property

.btn {
    border: 2px solid #fff;
}

• Margin: As similar as padding the margin is also use to giving the space to an Element, But not from inside the margin gives the space outside to an Element it is most useful property that you have be working with most of your time if you are a front end Developer