HTML padding相关

padding内填充

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style type="text/css">
			div{
				width:100px;
				height:100px;
				background: red;
				padding-top: 100px;
				padding-right: 100px;
				padding-bottom:100px;
				/*padding-left:100px*/
			}
		</style>
	</head>
	<body>
		<!--
			padding:内填充，在原来的基础之上的四个方向都加了一百像素
					即元素最外面到内部的距离
					注意：设置padding之后会将原来的容器撑大
					
			padding的四个方向
					top right bottom left
		-->
		<div id="">
			这里放的是一个杯具
		</div>
	</body>
</html>

各个方向的padding

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style type="text/css">
			div{
				width:100px;
				height:100px;
				background: red;
				padding-top: 100px;
				padding-right: 100px;
				padding-bottom:100px;
				/*padding-left:100px*/
			}
		</style>
	</head>
	<body>
		<!--
			padding:内填充，在原来的基础之上的四个方向都加了一百像素
					即元素最外面到内部的距离
					注意：设置padding之后会将原来的容器撑大
					
			padding的四个方向
					top right bottom left
					一个值	四个方向的padding的值都是一样的
					二个值	值一为上下  值二位左右
					三个值 值一为上  值二为左右  值三为下
					四个值	值一为上  值二为右    值三为下  值四为左
		-->	
		<div id="">
			这里放的是一个杯具
		</div>
	</body>
</html>

padding的复合样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style type="text/css">
			div{
				width:100px;
				height:100px;
				background: red;
				padding-top: 100px;
				padding-right: 100px;
				padding-bottom:100px;
				/*padding-left:100px*/
			}
		</style>
	</head>
	<body>
		<!--
			padding:内填充，在原来的基础之上的四个方向都加了一百像素
					即元素最外面到内部的距离
					注意：设置padding之后会将原来的容器撑大
					
			padding的四个方向
					top right bottom left
		-->
		<div id="">
			这里放的是一个杯具
		</div>
	</body>
</html>

padding内填充

各个方向的padding

padding的复合样式

猜你喜欢