Margin and Padding

Introduction: This is the fourth part in my CSS Styling tutorials, in which I will be covering Margins and Padding. Difference? Both the margin and padding properties give white space around an object, the main difference is the order of which they occur in. At the same time, margin is mostly used for positioning while padding is used for giving white space around an object. Order: As a good example of which order the properties go in, please see that attached image which is a screen shot of the Inspect Element feature within Google Chrome. This handy, interactive image highlights the different properties around the selected element right on the page so you can see exactly where each white space is. It also shows the order the properties go in (from furthest away to the closest to the element); Margin Border Padding Element In the screenshot, I am hovering my mouse over the padding element which is highlighting it on the page as green. The order of the properties is important because it allows more customisation for your elements (for example, in the image there is padding to make the border separate from the text, if margin was used, the border would be right up against the text and there would be white space around the outside of the border). Setting Margins and Paddings: A custom margin and padding can be set for each element, this is done by defining the property followed by the value, just like any other CSS property. Setting a 5px (pixel) margin all around the element... The above margin property sets the margin in the order of Top, Right, Bottom, Left. If two arguments are given (top and right) followed by auto, the bottom will be the same as the top, and the left will be the same as the right. Otherwise, if one property is given (top) followed by auto, the bottom will be the same as the top, and the left and right will be equal to the full width of the container where the element is stored (in other words, the element will horizontally center). Setting a 5px (pixel) margin all around the element, separately (any can be removed to give sides different values)... Setting a 5px (pixel) padding all around the element... Setting a 5px (pixel) padding all around the element, separately (any can be removed to give sides different values)... When are they used? Margins and paddings can be used to position any HTML element or object. They can be used despite the position value of the element (absolute, relative, etc.). Linking CSS To a HTML Element: To link your CSS to an HTML element (text, div, etc.) you will need to decide whether you want to use a class or id, you will also need a unique name. Once you have those, go to your element in HTML and add... ... to the attributes of that element if you chose a class, or... if you chose an id. Make sure you replace 'myClass' and/or 'myID' with your unique name. Then, in the CSS you will want to encase your properties with... if you chose a class, or... (You can remove the line beginning with // if you wish). Here's an example...