CSS Beginners Guide part 8 - Margins and Paddings

Hi, today we are going to learn about margins and padding's, the usage of css margins we can define the space around the elements using margin properties and we manage the space to individual sides by using margin top,bottom,right,left properties, css padding's define the space inside content of the elements, you can give padding to individual sides also, you can use short-hand property to manage the margins and paddings.

Margins

we can manage the margins to individual sides
ex:

<style>

div{

margin-top:5px; // set the 5px marign to Div top slide

margin-right:15px; // set the 15px marign to Div right slide

margin-bottom:5px; // set the 5px marign to Div bottom slide

margin-left:5px; // set the 5px marign to Div left slide


// short hand property to define four margin properties in one property

margin:5px 15px 5px 5px; // top right bottom left

}

</style>

Padding's

we can manage the padding's to individual sides
ex:

<style>

div{

padding-top:5px; // set the 5px paddung inside the Div top side

padding-right:15px; // set the 15px padding inside the Div right side

padding-bottom:5px; // set the 5px padding inside the Div bottom side

padding-left:5px; // set the 5px padding inside the Div left side


// short hand property to define four padding properties in one property

padding:5px 15px 5px 5px; // top right bottom left

}

</style>