CSS中塊狀結構類似於盒子模型，如下圖：
從左至又分別是外邊距，邊框，內邊距，內容，下面我們來分別測試這幾個屬性。
我先做一個沒有任何修飾的盒子模型：
代碼如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.text {
width: 400px;
height: 400px;
display: block;
border: solid 2px blue;
}
</style>
<title>盒子模型</title>
</head>
<body>
<div class="text"> 盒子模型測試<br />
盒子模型測試<br />
盒子模型測試<br />
盒子模型測試<br />
盒子模型測試<br />
盒子模型測試<br />
盒子模型測試<br />
盒子模型測試<br />
</div>
</body>
</html>
顯示效果如圖：
首先我加內邊距：padding:100px 0px 50px 100px;
可以看到裡面的文字向中靠攏，同時盒子也變大了，如下圖：
再設定外邊距：marign:100px 150px;
這時，可以看到網頁中顯示的仍然是上圖，沒有變化，
但我們這時如果再加如一段文字，
<div >
這是一段文字；
</div>
就會顯示如下所示的樣式：
可見，這段文字與盒子間有一段距離，這就是外邊距了。
最後我們測試一個行高屬性：line-height:50px;
效果：
可見，行高並不會影響盒子的寬度。
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
