The distance between the element content and the border can be set, which is called "filling". Filling can also be divided into top, right, bottom, and left (clockwise). The following code:
div{padding:20px 10px 15px 30px;}
The order must not be confused. You can write the above code separately:
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}If the top, right, bottom, and left padding are all 10px; you can write like this
div{padding:10px;}If the top and bottom padding are the same 10px, and the left and right padding are the same 20px, you can Write this:
div{padding:10px 20px;}<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>填充</title>
<style type="text/css">
#box1{
width:100px;
height:100px;
padding:10px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="box1">盒子1</div>
</body>
</html>