Photo by Inside Weather on Unsplash A few years back, when I was learning HTML and CSS, I found it difficult to differentiate between CSS margin and padding. In fact, at some point, I failed a quiz on these CSS properties. In the past two months, I have been taking the HTML/CSS microverse track. I have invested time, not only to understand but also to practice the CSS margin and padding properties. If you are a beginner learning HTML and CSS, I don’t want you to struggle to understand these concepts. This is why I will explain them to you using simple analogies. House analogy Imagine you have a piece of land and you want to build a house. First, you build a perimeter wall(defined border) around your land. When laying the foundation of your house(element), you are likely to leave some spacing between the perimeter wall and the house. If you build two houses(elements) in the same compound, you will have a spacing between the first house and the second house. Photo by Oliver Roos on Unsplash Margin. This spacing between the perimeter wall and the house, or from the first to the second house, should come into your mind when talking about margin. According to , “The CSS margin properties are used to create space around elements, outside of any defined borders.” w3schools You can set an element margin with the following properties: Specifies a shorthand property for setting the margin properties in one declaration. margin: Specifies the top margin of an element. margin-top: Specifies the right margin of an element. margin-right: Specifies the bottom margin of an element. margin-bottom: Specifies the left margin of an element. margin-left: example: <div = > < class "my-piece-of-land" My first house < = > div class "house1" </ > div /div> .my-piece- -land { : px;
  height: px;
  background: grey;  
} of width 900 300 .house1 { : px;
  background: white;
  margin: px; margin-top: px; margin-right: px; margin-bottom: px; margin-left: px; } width 350 100 /* sets a margin of 100px from the defined boder from all direction */ 10 /* Specifies the top margin of an element */ 10 /* Specifies the right margin of an element */ 10 /* Specifies the bottom margin of an element.*/ 20 /* Specifies the left margin of an element.*/ Padding. After your house is complete, and you put a table(element’s content) inside the house. The space around the table from the house wall is what we will call padding. According to , “The CSS padding properties are used to generate space around an element’s content, inside of any defined borders.” w3schools You can set values for the padding on each side of the box using the following properties: serves as shorthand for the preceding properties. padding: specifies the top padding of an element. padding-top: specifies the right padding of an element. padding-right: specifies the left padding of an element. padding-left: specifies the bottom padding of an element. padding-bottom: Example: <div = > < class "my-piece-of-land" My second house < = > div class "house2" </ > div /div> .house2 { : px;
  background: magenta;
  padding: px; padding-top: px; padding-right: px; padding-bottom: px; padding-left: px; } width 350 100 /* Serves as shorthand for the preceding properties. */ 10 /* Specifies the top padding of an element */ 10 /* Specifies the right padding of an element */ 10 /* Specifies the bottom padding of an element.*/ 20 /* Specifies the left padding of an element.*/ Difference between margin and padding. Conclusion Margin and padding are among the building block in HTML and CSS. These properties allow for the creation of an elegant layout in your design. You should spend time to deepen your understanding of these concepts. To dive deeper into these topics, check w3schools.com . References W3schools Tutorialspoint Pediaa

Mind

Winner of Noonies 2020 for the award Hacker Noon Contributor of the Year - SAAS.

2020 - Hacker Noon Contributor of the Year in SAAS

Book a call

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Understanding CSS Margin and Padding With Simple Analogies

Too Long; Didn't Read

Companies Mentioned

Oloo Moses

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Understanding CSS Margin and Padding With Simple Analogies

Too Long; Didn't Read

Companies Mentioned

Oloo Moses

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES