Analysis of CSS edge offset distance against left and right possibility values

This article mainly introduces the analysis of the possible values ​​of left and right for the edge offset distance of CSS. It has a certain reference value. Now I share it with you. Friends in need can refer to it

The edge offset distance of css plays a certain role in layout. Here is a brief introduction to all possible values ​​​​of left and right. If you are interested, you can refer to this article, which may be helpful for you to learn css

1). The set values ​​of 'left' and 'right' are both "auto"
If the values ​​of 'left' and 'right' are both "auto" (their initial values), the calculated value ( computed value ) is 0 (i.e., the box remains in its original position). 2). The setting value of either 'left' or 'right' is "auto"
If left is 'auto', the calculated value (computed value) is the negative value of right (for example, the box area is based on right value shifted to the left). If right is specified as ‘auto’, its computed value is the negative of the left value.
Sample code:

<p style="width:20px; height:20px; background-color:red; position:relative; left:100px;"></p>

In the above code, the p element is a relatively positioned element, its 'left' value is "100px", 'right' is not set, and the default is "auto", then, The calculated value of the 'right' property should be -left, i.e. "right:-100px".

3). The setting values ​​​​of 'left' and 'right' are not "auto"
If neither 'left' nor 'right' is "auto", then the positioning will appear to be far-fetched, one of which had to be abandoned. If the 'direction' attribute of the containing block is "ltr", then 'left' will win and the 'right' value becomes -left. If the 'direction' attribute of the containing block is 'rtl', then 'right' wins and the 'left' value is ignored.
Sample code:

<p style="width:100px; height:100px; overflow:auto; border:1px solid blue;"> 
<p style="width:20px; height:20px; background-color:red; position:relative; left:60px; right:60px;"></p> 
</p>

Finally, 'left' should be stronger.
Attribute values ​​of 'top' and 'bottom'
The 'top' and 'bottom' attributes move a relatively positioned element up or down without changing its size. 'top' moves the box down, while 'bottom' moves it up. Since 'top' and 'bottom' do not cause the box to be split or stretched, the calculated value is always top=-bottom. If both are "auto", the calculated value will be 0. If one of them is auto , which is the negative value of the other. If neither is "auto", 'bottom' is ignored and the calculated value of 'bottom' will be the negative of the 'top' value.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the method of responsive centered display of CSS banner image

How to use negative margin values ​​in CSS To adjust the center position

The above is the detailed content of Analysis of CSS edge offset distance against left and right possibility values. For more information, please follow other related articles on the PHP Chinese website!