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 w3schools, “The CSS margin properties are used to create space around elements, outside of any defined borders.” You can set an element margin with the following properties: margin: Specifies a shorthand property for setting the margin properties in one declaration.margin-top: Specifies the top margin of an element.margin-right: Specifies the right margin of an element.margin-bottom: Specifies the bottom margin of an element.margin-left: Specifies the left margin of an element. example: <div class="my-piece-of-land"> <div class="house1">My first house</div> </div> .my-piece-of-land { width: 900px; height: 300px; background: grey; } .house1 { width: 350px; background: white; margin: 100px; /* sets a margin of 100px from the defined boder from all direction */ margin-top: 10px; /* Specifies the top margin of an element */ margin-right: 10px; /* Specifies the right margin of an element */ margin-bottom: 10px; /* Specifies the bottom margin of an element.*/ margin-left: 20px; /* 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 w3schools, “The CSS padding properties are used to generate space around an element’s content, inside of any defined borders.” You can set values for the padding on each side of the box using the following properties: padding: serves as shorthand for the preceding properties.padding-top: specifies the top padding of an element.padding-right: specifies the right padding of an element.padding-left: specifies the left padding of an element.padding-bottom: specifies the bottom padding of an element. Example: <div class="my-piece-of-land"> <div class="house2">My second house</div> </div> .house2 { width: 350px; background: magenta; padding: 100px; /* Serves as shorthand for the preceding properties. */ padding-top: 10px; /* Specifies the top padding of an element */ padding-right: 10px; /* Specifies the right padding of an element */ padding-bottom: 10px; /* Specifies the bottom padding of an element.*/ padding-left: 20px; /* 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. W3schoolsTutorialspointPediaa Photo by Inside Weather on Unsplash Photo by Inside Weather on Unsplash Photo by Inside Weather Inside Weather on Unsplash 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 Photo by Oliver Roos on Unsplash Photo by Oliver Roos Oliver Roos on Unsplash 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 w3schools , “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: margin: Specifies a shorthand property for setting the margin properties in one declaration. margin-top: Specifies the top margin of an element. margin-right: Specifies the right margin of an element. margin-bottom: Specifies the bottom margin of an element. margin-left: Specifies the left margin of an element. margin: Specifies a shorthand property for setting the margin properties in one declaration. margin: margin-top: Specifies the top margin of an element. margin-top: margin-right: Specifies the right margin of an element. margin-right: margin-bottom: Specifies the bottom margin of an element. margin-bottom: margin-left: Specifies the left margin of an element. margin-left: example: <div class="my-piece-of-land"> <div class="house1">My first house</div> </div> <div class="my-piece-of-land"> <div class="house1">My first house</div> </div> <div class = "my-piece-of-land" > < div class = "house1" > My first house </ div > </div> <div class = "my-piece-of-land" > < div class = "house1" > My first house </ div > .my-piece-of-land { width: 900px; height: 300px; background: grey; } .my-piece-of-land { width: 900px; height: 300px; background: grey; } .my-piece- of -land { width : 900px; height: 300px; background: grey; } .my-piece- of -land { width : 900px; .house1 { width: 350px; background: white; margin: 100px; /* sets a margin of 100px from the defined boder from all direction */ margin-top: 10px; /* Specifies the top margin of an element */ margin-right: 10px; /* Specifies the right margin of an element */ margin-bottom: 10px; /* Specifies the bottom margin of an element.*/ margin-left: 20px; /* Specifies the left margin of an element.*/ } .house1 { width: 350px; background: white; margin: 100px; /* sets a margin of 100px from the defined boder from all direction */ margin-top: 10px; /* Specifies the top margin of an element */ margin-right: 10px; /* Specifies the right margin of an element */ margin-bottom: 10px; /* Specifies the bottom margin of an element.*/ margin-left: 20px; /* Specifies the left margin of an element.*/ } .house1 { width : 350px; background: white; margin: 100px; /* sets a margin of 100px from the defined boder from all direction */ margin-top: 10px; /* Specifies the top margin of an element */ margin-right: 10px; /* Specifies the right margin of an element */ margin-bottom: 10px; /* Specifies the bottom margin of an element.*/ margin-left: 20px; /* Specifies the left margin of an element.*/ } .house1 { width : 350px; margin: 100px; /* sets a margin of 100px from the defined boder from all direction */ margin-top: 10px; /* Specifies the top margin of an element */ margin-right: 10px; /* Specifies the right margin of an element */ margin-bottom: 10px; /* Specifies the bottom margin of an element.*/ margin-left: 20px; /* 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 w3schools , “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: padding: serves as shorthand for the preceding properties. padding-top: specifies the top padding of an element. padding-right: specifies the right padding of an element. padding-left: specifies the left padding of an element. padding-bottom: specifies the bottom padding of an element. padding: serves as shorthand for the preceding properties. padding: padding-top: specifies the top padding of an element. padding-top: padding-right: specifies the right padding of an element. padding-right: padding-left: specifies the left padding of an element. padding-left: padding-bottom: specifies the bottom padding of an element. padding-bottom: Example: <div class="my-piece-of-land"> <div class="house2">My second house</div> </div> <div class="my-piece-of-land"> <div class="house2">My second house</div> </div> <div class = "my-piece-of-land" > < div class = "house2" > My second house </ div > </div> <div class = "my-piece-of-land" > < div class = "house2" > My second house </ div > .house2 { width: 350px; background: magenta; padding: 100px; /* Serves as shorthand for the preceding properties. */ padding-top: 10px; /* Specifies the top padding of an element */ padding-right: 10px; /* Specifies the right padding of an element */ padding-bottom: 10px; /* Specifies the bottom padding of an element.*/ padding-left: 20px; /* Specifies the left padding of an element.*/ } .house2 { width: 350px; background: magenta; padding: 100px; /* Serves as shorthand for the preceding properties. */ padding-top: 10px; /* Specifies the top padding of an element */ padding-right: 10px; /* Specifies the right padding of an element */ padding-bottom: 10px; /* Specifies the bottom padding of an element.*/ padding-left: 20px; /* Specifies the left padding of an element.*/ } .house2 { width : 350px; background: magenta; padding: 100px; /* Serves as shorthand for the preceding properties. */ padding-top: 10px; /* Specifies the top padding of an element */ padding-right: 10px; /* Specifies the right padding of an element */ padding-bottom: 10px; /* Specifies the bottom padding of an element.*/ padding-left: 20px; /* Specifies the left padding of an element.*/ } .house2 { width : 350px; padding: 100px; /* Serves as shorthand for the preceding properties. */ padding-top: 10px; /* Specifies the top padding of an element */ padding-right: 10px; /* Specifies the right padding of an element */ padding-bottom: 10px; /* Specifies the bottom padding of an element.*/ padding-left: 20px; /* Specifies the left padding of an element.*/ Difference between margin and padding. Conclusion 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 w3schools.com References . References W3schools Tutorialspoint Pediaa W3schools W3schools Tutorialspoint Tutorialspoint Pediaa Pediaa
