# margin & padding Objectives: * Set up html and css files with css file link in head. ## File Location You should be located in the following files: ``` javascript-library └── 0-PreWork ... └── 2-CSS-Basics └── 03-margins-padding.css └── 03-margins-padding.html ``` ## Description Using `margin` and `padding` are ways that we can change the spacing around and between elements. The `margin` property is used to generate empty space *between* elements, **outside** of the border, where the `padding` property that creates space *around the* element's content **inside** of the border.
Let's grab an image from [here](https://codeleacher.files.wordpress.com/2009/04/marginandpadding.gif) to illustrate the difference between the two a little more clearly. Make sure that you save it to your `4-assets` folder with the other images saving it as margins-padding.gif so it can be referenced in the HTML as below in our example. ## Sample Code HTML: ```markup Margins and Padding

Margins and Padding

CSS Margins & Padding

Margin Experiment 1


Margin Experiment 2


Padding

Remember that padding is inside the margins and border. You can set the padding for divs, h's, p's, etc., but you will be inside the margins.

Padding

Here is a bunch of text to mess around with. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

``` CSS: ```css /* 1 */ h1{ text-align: center; } /* 4 */ .margins-padding{ border:2px solid blue; margin-top: 50px; margin-right: 250px; margin-bottom: 200px; margin-left: 200px; padding: 20px 20px 20px 40px; } #margin-demo { width: 400px; } #margin-experiment1{ height: 40px; background: blue; border: 5px solid pink; margin: 0px 0px 0px 0px; } #margin-experiment2{ height: 40px; background: blue; border: 5px solid pink; margin: 0px 0px 0px 0px; } /* 6 */ #margin-experiment3{ height: 40px; background: blue; border: 5px solid pink; margin: 5px 10px 20px 0px; padding: 10px 10px 10px 10px; } #margin-experiment4{ height: 40px; background: blue; border: 5px solid pink; margin: 5px 10px 20px 0px; padding: 10px 10px 10px 10px; } /* 8 */ .padding-class{ border:2px solid red; margin: 50px 50px 50px 50px; padding: 20px 20px 20px 40px; } #padding-experiment{ border: 2px solid yellow; margin: 50px 50px 50px 50px; /* padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; */ padding: 20px 20px 20px 20px; } ``` ## Discussion Now that you've got a little bit of experience with these properties, try testing different effects by uncommenting and commenting the `padding-top/right/bottom/left` in `#padding-experiment` at the bottom of your `.css` file. ## Challenge Check out the official [documentation](https://www.w3.org/TR/CSS2/box.html) on **box model** to further understand these concepts. ## Extra Resources [Click here!](http://codepen.io/jamespauloconnor/pen/KMVJPE) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://eleven-fifty-academy.gitbook.io/javascript-100-prework-gitbook/javascript-library/0-prework/3-css-basics/margin-and-padding.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.