Use of auto_html/css_WEB-ITnose

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.margin-left and width are fixed values, margin-right:auto

The actual value of margin-right in auto state at this time is 150-50-10=90px .

2.margin-left and margin-right are fixed values ​​10px, width:auto

The actual value of width written in auto state at this time is 150-10-10=130px.

3.width is a fixed value of 100px, margin-left and margin-right are both auto

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

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

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

5.margin-left, margin-right, and width are all set to auto

At this time, both margins will be set to 0, the width value is 150-0-0=150px.

Explanation

1. When margin-left, margin-right, and width are all set to values And when the sum is greater than the width of the parent element (overly restricted), margin-right will be reset to meet the width requirements (for languages ​​that read from left to right, otherwise margin-left will be reset).
2. Neither padding nor border can be set to auto, nor can they be negative numbers.
3. If margin-top or margin-bottom is set to auto in normal flow, it will automatically be calculated as 0, and vertical centering cannot be achieved.
4. margin:0 The horizontal centering effect of auto does not apply to inline elements (p, img). You can use text-align:center to horizontally center inline elements. If you must use margin, you must first use display:block. It becomes a block element.

Reference materials

"The Definitive Guide to CSS" Chapter 7 Basic Visual Formatting