天天看點
傳回

CSS之布局（盒子模型--内邊距）

盒子模型--内邊距： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子模型--内邊距</title>
		<style>
			.box1{
				width: 200px;
				height: 200px;
				background-color: #bfa;
				border: solid 10px orange;
				
				/*
					内邊距(padding);
						-内容區和邊框之間的距離是内邊距
							一共有四個方向的内邊距:
								padding-top
								padding-right
								padding-bottom
								padding-left;
						
						-内邊距的設定會影響到盒子的大小
						-背景顔色會延伸到内邊距上
						
					一個盒子的可見框的大小，由内容區、内邊距和邊框共同決定，
						是以在計算盒子大小時，需要将這三個區域加到一起計算	
					
				*/
				padding-top: 100px;
				/*
					padding内邊距的簡寫屬性也可以同時指定四個方向的内邊距
					padding:10px 20px 30px 40px;
				 */
			}
			
			
			.inner{
				width: 100%;
				height: 100%;
				background-color: yellow;
			}
			
		</style>
		
		
	</head>
	<body>
		<div class="box1">
			<div class="inner"></div>
		</div>
		
		
	</body>
</html>
css
上一篇: CSS基礎(8)_盒子模型之内容區、邊框
下一篇: 終于把Xgl的compiz 搞定了

繼續閱讀