Width and height define the width and height of the Content part, and add the width of padding border margin to the outside in sequence. The background is filled with the padding and content sections. However, due to browser design issues, different browsers may have different display effects. The problem of doubling left and right Margin when the box is float, the margin around the box in IE6 will double
The W3C defines the following box mode:
Width and height define the width and height of the Content part, and add the width of padding border margin to the outside in sequence. The background is filled with the padding and content sections.
However, due to browser design issues, different browsers may have different display effects.
The problem of doubling left and right Margin
When the box is float, the margin of the box around IE6 doubles. For example:
| The code is as follows: | Copy code |
| <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/> <Title> </title> <Style> . Outer { Width: 500px; Height: 200px; Background: #000; } . Inner { Float: left; Width: 200px; Height: 100px; Margin: 5px; Background: # fff; } </Style> </Head> <Body> <Div class = "outer"> <Div class = "inner"> </div> <Div class = "inner"> </div> </Div> </Body> </Html> |
|
The left margin of the inner is greater than 5px.
At this time, the display attribute of inner is defined as inline.
Automatic height calculation for outer box
According to W3C definition, the outer box without the float attribute does not automatically calculate the height. To calculate the height, you must add clear: both to the last box in the internal layer.
Opera, netscape, and mozilla do not calculate the outer box height, but Microsoft ie6 automatically calculates the outer box height. For example:
| The code is as follows: | Copy code |
| <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml"> |
|
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
