First, let's look at the box model in CSS. For example, we can think of it as a box opened above the reality, and then look down from the top down. The border is equivalent to the thickness of the box, compared with the space of objects in the box, filling is equivalent to a bubble filled in the box for shockproof purposes. The boundary is equivalent to setting aside space for other items around the box. This makes it easy to understand the box model. Therefore, the width of the entire box model in the page is composed of the Left Border + Left fill + content + right fill + Right Border + right border, the width defined in the css style is only the width of the content. If width is not specified, the content area of the parent container is filled by default. If height is not specified, the height is determined by the content contained in the parent container. You can use the following example to understand margin and padding: [html] <! 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 = UTF-8 "/> <style> # layoutdiv {width: 300px; height: 200px; background: # AC0; margin: 100px; padding: 50px; border: 10px solid # CCC ;}# contentdive {width: 200px; height: 160px; background: # eee ;}# layoutdiv1 {width: 300px; height: 200px; background: # AC0 ;}# contentdive1 {width: 200px; height: 160px; background: # eee ;} </style>
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
