A guide to CSS margin properties: margin-top, margin-right, margin-bottom and margin-left

CSS margin property guide: margin-top, margin-right, margin-bottom and margin-left, specific code examples required

Introduction:
In In CSS, margin is the spacing between a positioned element and its surrounding elements. It can be used to control the distance between an element and other elements, bringing more flexibility and beauty to web design.

This article will introduce in detail the four properties of CSS margins: margin-top, margin-right, margin-bottom and margin-left. At the same time, in order to better understand and learn, specific code examples will be provided to help readers better apply them to actual development.

1. Margin-top attribute
The margin-top attribute is used to set the top margin of the element. It accepts values ​​in absolute or relative units, such as pixels (px), percentages (%), em, etc.

Sample code:

div {
  margin-top: 20px; /* 顶部外边距设置为 20px */
}

2. Margin-right attribute
The margin-right attribute is used to set the right margin of the element. Like the margin-top property, it also accepts values ​​in absolute or relative units.

Sample code:

div {
  margin-right: 10%; /* 右侧外边距设置为父元素宽度的 10% */
}

3. Margin-bottom attribute
The margin-bottom attribute is used to set the bottom margin of the element. Likewise, it can accept values ​​in absolute or relative units.

Sample code:

div {
  margin-bottom: 2rem; /* 底部外边距设置为 2 个根元素字体大小 */
}

4. Margin-left attribute
The margin-left attribute is used to set the left margin of the element. Likewise, it can accept values ​​in various units.

Sample code:

div {
  margin-left: -30px; /* 左侧外边距设置为 -30px */
}

5. Abbreviation method
In addition to setting the margin properties in each direction individually, you can also use the abbreviation method to set the margins in four directions at once. The order is top, right, bottom and left.

Sample code:

div {
  margin: 10px 20px 30px 40px; /* 上右下左的外边距分别设置为 10px, 20px, 30px 和 40px */
}

6. Notes

1. The margins will overlap (ie merge): when two or more consecutive boxes are arranged vertically , their vertical margins will overlap, and the larger one will be used as the final margin.
2. Margins have no effect on absolutely positioned elements: If an element is absolutely positioned relative to its containing block, its margins will have no effect on other boxes.
3. Margins are not valid for floating elements: The margins of a floating element do not affect the margins of other elements, and the margins of other elements do not affect the position of the floating element.
4. Margins will only affect the left and right margins of inline elements, but not the top and bottom margins.

Conclusion:
Through the introduction of this article, we understand the basic usage and precautions of the margin attribute in CSS. In actual development, reasonable and flexible use of margin attributes can bring more possibilities and beauty to web design. I hope this article can help readers learn and apply CSS margin properties.

The above is the detailed content of A guide to CSS margin properties: margin-top, margin-right, margin-bottom and margin-left. For more information, please follow other related articles on the PHP Chinese website!