DEV Community

Cover image for Demystifying CSS ( A Pratical Approach ) Part. I

Demystifying CSS ( A Pratical Approach ) Part. I

Web and Mobile Development enthusiast, focusing on Javascript (Node.js, React and React Native). In your spare time, why not solve a Magic Cube?
Updated on ・2 min read

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


element without margin

Alt Text

element with margin

Alt Text

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.

Alt Text

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.

Alt Text


element without padding

Alt Text

element with padding

Alt Text

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!

Discussion (0)