Make delicious recipes!

Chapter 8: Margin



Margin tag specifies the distance of the current element from its outer parent element.
For example, in the below example, the margin of red div from the blue div is 10px.

height:100px;
margin:10px;
border-style: solid;
border-width:2px;
border-color:red




Margin can be split into four types: right, left, top and bottom.
For example, the margins are differently specified for the below blue and red colored divs.

margin-top:10px;
margin-right:20px;
margin-left:30px;
margin-bottom:40px;



Padding


While margin specifies the distance from current element to the outer element, padding specifies the distance from current element to its inner element.
So, when specifying margin, you look outwards from the current element.
And when specifying padding, you look inwards from the current element.


For example, the below red div has 10x padding for its inner green div.




Similar to margin, padding can also be specified differently for different sides: top, right, left, bottom.

padding-top:10px;
padding-right:20px;
padding-left:30px;
padding-bottom:40px;







Like us on Facebook to remain in touch
with the latest in technology and tutorials!


Got a thought to share or found a
bug in the code?
We'd love to hear from you:

Name:
Email: (Your email is not shared with anybody)
Comment:

Facebook comments:

Site Owner: Sachin Goyal