HTML and CSS Reference
In-Depth Information
In this example, the content of the element will consume a total of 200x100px.
The padding has then been declared as a single property with 4 values (rather than as
padding-left, padding-right etc). This is applying 10px to the top and bottom, and 0 to the
left and right. The way to remember the order of the 4 values is TRouBLe (Top, Right,
Bottom, Left).
One more pixel is then being added for the border, and 15 pixels of margin to the right of
the element.
This means that the height of the element will be 100+10+10+1+1 = 122px, while the width
will be 200+1+1+15=217px.
It is worth mentioning that the margin set on an element can be negative. This causes an
element to take up less space than it otherwise would.
