CSS Box Model diagram:
We have some common property names in Web design: content, padding (padding), Borders (border), boundaries (margin), and CSS box models have these properties.
Example:
HTML file Contents:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"Http://www.w3.org/TR/html4/loose.dtd" >
Example of a <title>css box model </title>
<link rel= "stylesheet" style= "Text/css" href= "Test.css"/>
<body>
<div class= "CLS1" >
</div>
</body>
Content of Test.css:
The/*body label is used as a box and is an XHTML specification that requires the introduction of <! in the HTML file header Doctype> Label * *
body{
border:1px solid red; /*1PX is the width of the border solid represents the solid line red Red * *
width:500px;
height:400px;
/* Let body automatically center * *
margin:0 Auto; /* The first parameter 0 is used for the top and bottom, the second for the left and right, auto means center automatically
}/* Box Model * *
. cls1{
width:200px;
height:200px;
BORDER:1PX solid blue;
margin-left:5px;
margin-top:5px;
padding-top:10px;
padding-left:10px;
}
. CLS1 img{
width:180px;
height:180px;
}The effect chart is as follows:
More Wonderful content: http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/
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
