The positive and negative values of the margin attribute are determined, and the negative values of the margin attribute

The positive and negative values of the margin attribute are determined, and the negative values of the margin attribute
The margin attribute is used to set the margin. In most cases, a positive value is used, but negative values are used for some complicated positioning. Therefore, it is necessary to understand the positive and negative values of the margin attribute, this article also explains the causes and solutions for the ineffective effects of margin-right and margin-bottom. 1. "margin-left" attribute

Set the left margin of the element in the margin-left attribute.

Memory mode 1: The "left of the original position of the element" is the zero line, and the right is a positive value, and the left is a negative value.

Memory mode 2: The "edge of other elements (that is, the external element to be opened)" is the zero line, and the distance between the left and the zero line of the element is positive; the left side of the element exceeds the zero line and is negative.

Example:

2. "margin-right" attribute

Set the right margin of the element in the margin-right attribute.

Note:The direct use of the margin-right attribute generally does not have any effect, because the browser renders elements from left to right by default, without exceeding the width of the parent container, if the sub-container width can be accommodated, setting margin-right is useless.

Solution:To make margin-right useful, you must use the position or float attribute.

Here, the position is used as an example. First, the parent element is set to relative position: relative, and then the test element is set to absolute position: absolute, right: 0px.

Memory mode 1: the "right side of the original position of the element" (this refers to the position that has been located, and the preset position) is the zero line, the left is a positive value, and the right is a negative value.

Memory mode 2: The "edge of other elements (that is, the external element to be opened)" is the zero line, and the distance between the right and the zero line of the element is positive; if the value on the right of the element exceeds the zero line, the value is negative.

Example:

3. "margin-top" attribute

Set the top margin of the element in the margin-top attribute.

Memory mode 1: the "top of the original position of the element" is the zero line, and the downward movement is a positive value, and the upward movement is a negative value.

Memory mode 2: The "edge of other elements (that is, the external elements to be pulled apart)" is the zero line, and the distance between the element top and the zero line is positive; the element above the zero line is negative.

Example:

4. "margin-bottom" attributes

The margin-bottom attribute sets the bottom margin of the element.

Note:The direct use of the margin-bottom attribute generally does not have any effect, because the browser renders elements from top to bottom by default, without exceeding the height of the parent container, if the height of the sub-container can be accommodated, setting margin-bottom is useless.

Solution:To make the margin-bottom useful, you must use the position or float attribute.

Here, the position is used as an example. First, the parent element is set to relative position: relative, and then the test element is set to absolute position: absolute, bottom: 0px.

Memory mode 1: the "bottom of the original position of the element" (which indicates the position that has been located and the prerequisite is set) is the zero line, and the value is shifted upwards to a positive value, and the value is shifted downward to a negative value.

Memory mode 2: The "edge of other elements (that is, the external element to be opened)" is the zero line, and the distance between the element and the zero line is positive; the element below exceeds the zero line is negative.

Example:

Summary:

Take the "edge at the original position of the element" as the zero line (margin-left takes the left side, margin-right takes the right side, margin-top above, and margin-bottom below ), moving in the opposite direction of the edge is a positive value, and moving in the same direction of the edge is a negative value. For example, in margin-left, the "left of the original position of an element" is a zero-line, and the right is a positive value, and the left is a negative value.