Box model-fill

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>

Continuing Learning

new file

<!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>

submit Reset Code

Automatic operation