CSS盒子模型示意圖：
我們在網頁設計中的一些常用屬性名稱：內容（content）、填充（padding）、邊框（border）、邊界（margin），CSS盒子模型均具備這些屬性。
例子：
html檔案內容：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS盒子模型的例子一</title>
<link rel="stylesheet" style="text/css" href="test.css" />
</head>
<body>
<div class="cls1">
<img src="2.jpg" />
</div>
</body>
</html>
test.css的內容：
/*body標籤作為盒子使用，屬於xhtml規範，需在html檔案頭部引入<!DOCTYPE>標籤*/
body{
border:1px solid red; /*1px 為邊框的寬度 solid表示實線 red 紅色*/
width:500px;
height:400px;
/*讓body自動置中*/
margin:0 auto; /*第一個參數0用於上下，第二個用於左右，auto表示自動置中*/
}
/*盒子模型*/
.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;
}
效果圖如下：
更多精彩內容：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
