Demystifying CSS ( A Pratical Approach ) Part. I

I decided write a tutorial about CSS, demystifying some properties and concepts about css. this is a first part from a series of posts. then, enjoy!

Margin vs Padding

Margin : Defines the exterior space of an elements relative to browser elements. For examples : want give a space of 10px to a button in relation to top of page. Therefore, margin property defines the margins of a element.

margin used alone implies give a margin in top, left, right and bottom with the same spacing values, however It's still possible defines specific values for each sense.

margin-top : top spacing
margin-bottom : bottom spacing
margin-right : right spacing
margin-left : left spacing

Examples

element without margin

element with margin

That is, from the margin, it is possible to define the same spacing value for all directions, as it is possible to select specifically which directions will have a spacing.

Padding : Sets the spacing relative to the edge of an element. That is, defines the horizontal and vertical spacing of an element within a larger element.

Like margin, the padding property can define spacing in four directions: top, bottom, right and left.

Examples

element without padding

element with padding

Conclusion 🎉

So this first part of the "Demystifying CSS (A Pratical Approach)" series came to an end. Thanks for everything and wait for the other parts!