1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Document</title>
    10.   <style>
    11.     div {
    12.       width: 200px;
    13.       height: 200px;
    14.       background-color: blue;
    15.       padding-left: 20px;
    16.       padding-top: 20px;
    17.     }
    18.   </style>
    19. </head>
    21. <body>
    22.   <div>
    23.     WinFangWinFang <br>
    24.     WinFangWinFang <br>
    25.   </div>
    26. </body>
    28. </html>

    image.png
    image.png
    所以div盒子大小宽从200px→220px，高：200px→220px。
    image.png
    如果保证盒子跟效果图大小保持一致，则让width\height减去多出来的内边距大小即可。

    如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。