Padding and Margins

CSS padding and margins are used to control the space around elements in an HTML document.

Padding is the space inside an element, between the element's content and its border. Padding is defined using the padding property.

Example:

p {
  padding: 20px;
}

You can also specify different padding values for each side of the element using the padding-top, padding-right, padding-bottom, and padding-left properties.

Example:

p {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

Margins are the space outside an element, between the element's border and the next element. Margins are defined using the margin property.

Example:

p {
  margin: 20px;
}

You can also specify different margin values for each side of the element using the margin-top, margin-right, margin-bottom, and margin-left properties.

Example:

p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

Padding and margins are useful for creating white space and separating elements in an HTML document. They can be used to create visual hierarchy, align elements, and improve the overall layout and design of the webpage.