CSS Margin & Padding

I. Padding

padding property allows us to control the internal space between the contents and the borders.

To be more specific about the amount of padding on each side of content, we can use the following properties:

• padding-top
• padding-right
• padding-bottom
• padding-left

This code sets the padding-bottom to 10px.

p {
  padding-bottom: 10px;
}

This code sets the paragraph padding to 10 pixels on the top and bottom and 20 pixels on the left and right.

p {
  padding: 10px 20px;
}

II. Margin

margin property allows us to specify the margin or space outside the element border.

The following code will set the margin of all sides to 10px;

p {
  margin: 10px;
}

1. To be specific about the amount of margin on each side, we can use the following properties:

• margin-top
• margin-right
• margin-bottom
• margin-left

p {
  border: 4px solid gray;
  margin-top: 15px;
}

2. We have a shorthand margin property in a clockwise rotation.

p {
  margin: 5px 10px 3px 15px;
}

• 5px: top
• 10px: right
• 3px: bottom
• 15 px: left

3. When the values of top and bottom margins are equal, and the left and right values are also equal, we can use the following shortcut:

p {
  margin: 30px 20px;
}

This code will set the p top and bottom margins to 30 pixels and the left and right margins to 20 pixels.

4. To center an element, we use auto for both margin left and right

div {
  margin: 0 auto;
}

• The 0 sets the top and bottom margins to 0 pixels.
• The auto value adjusts the left and right margins until the element is centered within its containing element.

III. Box sizing

By default, the width and height of an element are calculated:

• width + padding + border = actual width of an element
• height + padding + border = actual height of an element

The box-sizing property allows us to include the padding and border in an element’s total width and height.

Example: In this code, the max-width is 100% inclusive of the padding

main {
  max-width: 100%;
  width: 1200px;
  padding: 0 20px;
  box-sizing: border-box;
}

IV. Block-level and inline elements

HTML is made of inline and block-level elements.

The difference is how they’re displayed in the browser and how much room they take on the page.

1. Inline elements

• Line up next to each other in the browser
• They don’t take more room than their content needs
• Tags: span, img, strong, em, a, etc.

2. Block-level elements

• They take up the whole width of the page regardless of the content
• p, div, headings (h2, h3, …), ul, li, etc.

The browser will automatically add display: block; to these elements.

h2 {
  display: block;
}

3. inline-block

When we set inline-block to an element, it still lines up next to other elements and is similar to block-level elements in terms of margin and padding.

So, we can add margin-top and margin-bottom, and padding is going to work better.

span {
  display: inline-block;
}