CSS Margins:

CSS margins control the space outside an element, creating spacing between elements on a webpage. Margins do not affect an element’s size but help position elements properly.

1️⃣ CSS Margin Properties

Property	Description
`margin`	Shorthand for setting all four margins (top, right, bottom, left).
`margin-top`	Sets the top margin of an element.
`margin-right`	Sets the right margin of an element.
`margin-bottom`	Sets the bottom margin of an element.
`margin-left`	Sets the left margin of an element.
`margin: auto;`	Centers an element horizontally (if width is defined).

2️⃣ Margin Properties with Examples

1. Setting All Margins (`margin`)

The margin property defines space around an element in one line.

div {
  margin: 20px; /* Adds 20px space on all sides */
}

💡 This is the same as:

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

2. Setting Different Margins for Each Side

You can assign different values for each side.

p {
  margin: 10px 15px 20px 25px; /* top, right, bottom, left */
}

✅ Shorthand order:

margin: top right bottom left;
If only two values are provided → top-bottom right-left
If only one value is provided → Applies to all sides

Example:

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

3. Using Auto Margin (`margin: auto;`)

The auto value is commonly used to center elements horizontally.

div {
  width: 50%;
  margin: auto; /* Centers the element */
}

💡 Works only when the element has a defined width.

4. Negative Margins

Margins can have negative values to pull elements closer.

h1 {
  margin-top: -10px; /* Moves element upward */
}

✅ Common use cases:

Overlapping elements
Adjusting spacing between sections

3️⃣ Summary Table

Property	Example	Description
`margin`	`margin: 20px;`	Sets margin for all sides.
`margin-top`	`margin-top: 10px;`	Adds space on top.
`margin-right`	`margin-right: 15px;`	Adds space on the right.
`margin-bottom`	`margin-bottom: 20px;`	Adds space below.
`margin-left`	`margin-left: 25px;`	Adds space on the left.
`margin: auto;`	`margin: auto;`	Centers an element horizontally.
Negative Margin	`margin-top: -10px;`	Pulls elements closer.

4️⃣ Conclusion

CSS margins are essential for spacing elements and improving layout structure. The margin: auto; property is useful for centering, while negative margins allow fine-tuning element positioning.

CSS