天天看点
返回

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 搞定了

继续阅读