Home > Developer > JavaScript
Standard W3C box model and IE box model, w3c box model ie
CSS Box Model: A thinking model used by CSS technology in web design.
CSS box model composition: margin, border, content ).
The CSS box model is divided into the standard W3C box model and the IE box model. Note that the width and height of the two models have different attributes.
Standard W3C box model:
W3C model:
Width in CSS = width of content
Height in CSS = content height
Eg:
<Div> width: 50px; height: 50px; padding: 2px; border: 1px solid blue; margin: 3px; ">
W3C Model
</Div>
The actual size of the div:
Div height = height + (padding + border + margin) * 2 = 50 + (2 + 1 + 3) * 2 = 62px;
Div width = width + (padding + border + margin) * 2 = 50 + (2 + 1 + 3) * 2 = 62px;
Div content size:
Div height = 50px;
Div width = 50px;
IE box model:
In the IE model:
Width in CSS = width of content + (border + padding) * 2
Height in CSS = content height + (border + padding) * 2
Eg:
<Div> width: 50px; height: 50px; padding: 2px; border: 1px solid blue; margin: 3px; ">
W3C Model
</Div>
The actual size of the div:
Div height = height + margin * 2 = 50 + 3*2 = 56px;
Div width = width + margin * 2 = 50 + 3*2 = 62px;
Div content size:
Div height = height-(border + padding) * 2 = 50-(1 + 2) * 2 = 44px;
Div width = width-(border + padding) * 2 = 50-(1 + 2) * 2 = 44px;
Solution:
Add the following doctype declaration to the top of the Code,
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
Make the page rendered in W3C box model.
Eg:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<Html>
<Head>
<Title> standard w3c Box Model </title>
</Head>
<Body>
</Body>
</Html>
To make the webpage compatible with various browsers, let's use the standard w3c box model.
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
