CSS Margins & Paddings

The margin is responsible for space outside of the element's defined borders. It works like a safety bag and prevents elements from bumping into each other. Without margins, users would struggle to scan a page and find the necessary information.

For setting an element's margin, you can select a shorthand margin property and list in a clockwise order (starting from the top), all values separated by gaps, like in the example.

Remember to always define margin values. Usually, web developers use pixels.

Like people, elements on a page need some personal space, and padding is here for that. In other words, it's the white space within an element border. With padding, elements stand out and are easy to perceive.

For setting padding, you can use a common padding property and define all four values in a clockwise order (top, right, bottom, and left padding) at once, separated by gaps.

Like many other things in the HTML/CSS universe, you can define padding with pixels.

Instead of using a common padding property, you can specify each value separately with the padding-top, padding-right, padding-bottom, and padding-left properties. Likewise, you can define margin-top, margin-right, margin-bottom, and margin-left properties individually. All values should be specified in px, em, pt, cm, or percentage.

A pixel isn't the only measurement unit that we can use for defining elements' values. All padding and margin properties can specify their values in:

• Length: You can use familiar pixels or points (pt), centimeters (cm), and other measurement units.
• Percentage (%): You specify a property in the percentage of the container's width.
• Global values: These values (inherit, initial, or unset) indicate how the padding and margin properties inherit values from the parent element or reset to their browser defaults.

Unlike padding, margin can have the auto value. You can either set this value for both left and right margin or the shorthand margin property only. The browser centers the element, like text or image, within its container horizontally. The element will take up the width you specify, while the remaining space will be split evenly between the left and right margin.

Setting auto values for vertical margin (top and bottom) doesn't make much sense. The element will be pulled to the edge with a margin value equal to 0.

Unlike padding, margin can have a negative value. A top/left negative value pulls the element in the specified direction, while a bottom/right clashes a succeeding element with the main one.

In general, negative values don't influence the page's flow even if you apply them to static elements. In other words, if you use a negative margin to nudge an element upwards, all succeeding elements will be pulled as well.

The margin collapse happens when the top and bottom values collide, like in the example, where the <h1> element has a bottom margin of 80px and the <h2> element has a top margin of 40px. Due to the margin collapse, the final value is equal to the largest of the two margins (or just one of them, if they are equal), 80px, instead of summing up values into a total of 120px margin.

Margin shorthand property allows you to specify all necessary values at once separated by gaps. What happens if you don't define all 4 of them?

• When you set only one value, it applies to all four sides
• When you set two values, the first one defines the top and bottom margin, while the second defines the left and right margin
• When you set 3 values, the first one defines the top margin, the second defines the left and right, and the third defines the bottom

Like margin, we can only set one, two, or three padding values and call it a day. Consider the following:

• If you specify one value, it applies to all four sides
• If you specify two values, they apply to the top and bottom and left and right, respectively.
• If you specify three values, the first one applies to the top, the second to the right and left, the third to the bottom

The correct name for a property setting the top padding is — surprise! — padding-top. You can either use an individual property or a shorthand padding property and define one, two, three, or four values separated by gaps. The first value will always be meant for the top padding.

If padding values are equal for all 4 sides, the syntax is simple:

padding: the value in px, cm, pt, etc.

Of course, if you plan on adjusting padding later, you can write down all 4 values separated by gaps.

If the top/bottom and right/left margin are equal, you don't need to write down each property individually. Two values are enough. The first one will apply to the top and bottom margin, and the second one — to the left and right. The same rule is relevant for padding.