HTML+CSS 轻松入门之盒子模型之填充

元素内容与边框之间是可以设置距离的,称之为“填充”。填充也可分为上、右、下、左(顺时针)

下面我们写一个实例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
      div{
       width:200px;
       height:100px;
       border:1px solid red;
       padding:10px 10px 10px 10px;
      }
  </style>
</head>
<body>
    <div>php中文网</div>
</body>
</html>

其实也可以这么写

div{
    padding-top:10px;
    padding-right:10px;
    padding-buttom:10px;
    padding-left:10px;
}

如果都是一样也还可以这样写

padding:10px;

顺序是上  右  下  左 

如果上下值相同,左右值相同,可以这样写

padding:10px 20px;

Weiter lernen
||
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width:200px;
height:100px;
border:1px solid red;
padding:10px 10px 10px 10px;
}
</style>
</head>
<body>
<div>php</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
einreichenCode zurücksetzen
图片放大关闭