margin-right: –30px;
5.17 
It’s important to understand that when considering the amount that the element is moved by, the browser takes into consideration the margin set on the target element. Looking at the following example highlights this in more detail.
5.18 
As you can see, the left div has a margin-right of −30px, which will pull the div directly to its right in by 30px; however, the right div has a margin-left of 30px, which pushes it out again by 30px, meaning that the div is back to its original starting position as the two rules cancel each other out.
Padding
Let’s finish our look at the box model with a nice and easy property, padding. As we discussed earlier in the section, padding relates to the space between your content and your border. It is often used to add a bit of ‘breathing space’ around your content to allow for easier reading of your text. The padding property doesn’t throw up anything that we haven’t seen before; as you can tell from the general pattern of these properties, we have the more declarative form and the shorthand form for each. Padding is no different. First the declarative forms:
- padding-top
- padding-right
- padding-bottom
- padding-left
Just as with the other box-related properties, we can specify the property value using length values or as a percentage (again, as a percentage of the containing element). Then, as expected, we also have the shorthand padding property, on which we are able to specify our individual sides padding values in the usual clockwise order, like so: