{"id":25,"date":"2012-05-05T00:00:30","date_gmt":"2012-05-05T00:00:30","guid":{"rendered":"https:\/\/learnwebcode.com\/?p=25"},"modified":"2016-03-29T01:37:05","modified_gmt":"2016-03-29T01:37:05","slug":"css-box-model-margin","status":"publish","type":"post","link":"https:\/\/learnwebcode.com\/css-box-model-margin\/","title":{"rendered":"CSS Lesson 5: Understanding The Box Model Part 2: Margin"},"content":{"rendered":"

As you begin designing layouts with CSS you will inevitably need to create spacing between elements; thus, today\u2019s lesson is regarding the \u201cmargin\u201d property.\u00a0 Let\u2019s begin with a quick image to illustrate the margin property in action:<\/p>\n

\"CSS<\/p>\n

Margin is space added to the outside of an element (past the element\u2019s edge, or border).\u00a0 In some instances, Padding and Margin can be used to achieve a similar affect, but it\u2019s important to understand the difference.\u00a0 Padding adds space to the inside<\/strong> of an element, while margin adds space to the outside<\/strong> of an element.<\/p>\n

Let\u2019s code a simple example of margin in action.\u00a0 Begin with the following HTML code, and place it in a blank XHTML starter file<\/a>.<\/p>\n

\r\n<div id="box-a">\r\n<p>Box A<\/p>\r\n<\/div>\r\n\r\n<div id="box-b">\r\n<p>Box B<\/p>\r\n<\/div>\r\n<\/pre>\n
Next, let\u2019s give these two boxes a width, background-color, a border and padding.\u00a0 Add the following code to your CSS file:<\/p>\n
#box-a {\r\n    width: 300px;\r\n    padding: 15px;\r\n    background-color: orange;\r\n    border: 1px solid black;\r\n}\r\n\r\n#box-b {\r\n    width: 300px;\r\n    padding: 15px;\r\n    background-color: gray;\r\n    border: 1px solid black;\r\n}\r\n<\/pre>\n
When viewed in a web browser, our example should look like this:<\/p>\n
\"CSS<\/p>\n
Now imagine we want to create 10 pixels of spacing between the two boxes.\u00a0 We would achieve this by adding bottom-margin to box-a<\/strong>:<\/p>\n
\r\n#box-a {\r\n    margin-bottom: 10px;\r\n    width: 300px;\r\n    padding: 15px;\r\n    background-color: orange;\r\n    border: 1px solid black;\r\n}\r\n<\/pre>\n
When refreshed in our web browser, our page should now look like this:<\/p>\n
\"CSS<\/p>\n
You may wonder, “Could we have also added margin-top<\/strong> to box-b<\/strong>?”\u00a0 Let’s do that now; let’s double the space between the boxes by adding another 10 pixels of margin to box-b<\/strong>:<\/p>\n
\r\n#box-b {\r\n    margin-top: 10px;\r\n    width: 300px;\r\n    padding: 15px;\r\n    background-color: orange;\r\n    border: 1px solid black;\r\n}\r\n<\/pre>\n
When you refresh the page in your web browser, you’ll notice that the spacing didn’t double; it stayed exactly the same.  This is because two margins are touching, so one collapsed<\/strong>.  Essentially, when two margins touch the larger margin is used, and the smaller disappears (or collapses).<\/p>\n
To fully illustrate this point, let’s change the margin-top<\/strong> of box-b<\/strong> from 10 pixels to 11<\/strong>.  When we refresh the page in our web browser we’ll notice that the spacing hasn’t ballooned to 21 pixels, but instead has increased by only one pixel<\/strong>.<\/p>\n
\"CSS<\/p>\n
The browser uses the 11 pixel margin of box-b<\/strong> and collapses the smaller 10 pixel margin of box-a<\/strong>.<\/p>\n
That’s all for today’s lesson.\u00a0 To recap, you now know:<\/p>\n