Use of auto, use of auto

Use of auto, use of auto

Html

1 <div class="container">2     <div class="demo">  3     </div>4 </div>  

Css

 1 .container{ 2       width:150px; 3       height:50px; 4       background:rgb(236,100,143); 5 } 6 .demo{ 7       background:rgb(141,163,210); 8       width:auto; 9       height:50px;10       margin-left:10px;11       margin-right:10px;12 }

1. The values of margin-left and width are fixed. margin-right: auto

In this case, the value of margin-right in the auto state is 150-50-10 = 90px.

2. The values of margin-left and margin-right are 10px, width: auto.

In this case, the width of the auto state is actually 150-10-10 = 130px.

3. If width is set to 100px, both margin-left and margin-right are auto.

At this time, the demo is centered, and the values of margin-left and margin-right in the writing auto state are both (150-100)/2 = 25px.

4. The value of margin-left is 10px, and both width and margin-right are auto.

The margin set to auto is reduced to 0 (margin-right: 0), and the width value is 150-10 = 140px.

5. Set margin-left, margin-right, and width to auto.

Both margins are set to 0, and the width value is 150-0-0 = 150px.

Description

 

References

CSS authoritative guide Chapter 1 Basic visual formatting