本次的demo是為了熟悉盒子模型中的間距margin和填充padding,特別是block和inline中比較特殊的地方。

需要注意的幾點：

1.區塊元素以div為例，在不浮動的一般情況下，兩個相鄰的div都設定了margin,那麼它們之間的間距會合並，合併後的間距是兩者中值較大的一個。

2.內聯元素沒有上下margin;並且左右的margin值不會合並；

3.內聯元素的上下padding會擠佔該元素的上下相鄰元素的空間

以下是本次demo的程式碼：

1.本次demo的結構（純HTML）：

<div class="comment">
		<div class="topic">
			<div class="star">
			</div>
		</div>
		<p>
			<span>標  籤：</span>
			<b>比洗衣粉好</b>
			<b>去汙能力強</b>
		</p>
		<p>
			<span>心  得：</span>
			<span>買了幾次了，挺好用的，洗的衣服很乾淨，以後就它了！</span>
		</p>
		<p>
			<span>購買日期：</span>
			<span>2014-12-01</span>
		</p>
		<div class="btn">
			<span>有用(3)</span>
			<span>回覆(3)</span>
		</div>
	</div>
	<div class="page">
		<a href="#" class="current">1</a>
		<a href="#">2</a>
		<a href="#">3</a>
		<a href="#">4</a>
		<a href="#">5</a>
		<a href="#">6</a>
	</div>
 

2.本次demo的CSS部分：

.comment{
		width:800px;
		height:160px;
		border:1px solid #ccc;
		padding:10px 15px;
	}
	 .topic{
		border-bottom:1px solid #ccc;
		padding-bottom:5px;
	}
	.topic .star{
		width:76px;
		height:15px;
		background:url(img/iconlist_1.png) no-repeat -108px -238px;
	}
	.comment p b{
		padding:4px 10px;
		background-color:#ffd0dd;
	}
	.btn span{
		border:1px solid #ccc;
		padding:5px 10px;
		margin-right:10px;
		background-image:linear-gradient(to top,#ccc 50%,#fff 100%);
	}
	.page{
		margin:10px;
	}
	.page a{
		padding:3px 10px;
		border:1px solid #ccc;
		border-radius:6px;
	}
	.page a:hover{
		color:#fff;
		background-color:#0ef;
	}
	.page .current{
		background-color:#fff;
		border:0;
	}


 

3.本次demo遇到的問題：

在實現評價框與頁碼的間距的時候，沒有考慮到內聯元素的上下padding擠佔的問題，導致在瀏覽器顯示的時候，看不出間距，原因在於，設定的padding的top值偏大，使得a的高超出了.page的範圍，擠佔了.page的間距，解決：將margin值增大，減小padding的top值。

出現問題的頁面截圖：

程式碼部分截圖：

4.本次demo的最終效果圖: