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>