盒模型——内边距-CSDN博客

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>postion</title>
       <style>
           .box1{
               /*
               *使用width来设置盒子内容的宽度
               * height来设置盒子内容的高度
               * width和height
               */
               width:200px;
               height:200px;
               background: greenyellow;
               /*设置边框*/
               border:3px red solid;
               /*
               *内边距（padding）：指定盒子的内容区与盒子边框之间的距离
               * 一共有四个方向的内边距，可以通过：
               *        padding-top
               *        padding-bottom
               *        padding-left
               *        padding-right
               *            来设置四个方向的内边距
               *
               * 内边距会影响盒子可见框的大小，元素的背景会延伸到内边距
               *    盒子的大小由内容区、内边距和边框共同决定
               * 盒子的可见框的宽度=border-left-width+padding-left+width+padding-right+border-right-width
               * .............高度=...........
               */
               /*padding:20px;*/
               padding:20px 30px 40px;
               /*上、右左、下（顺时针）*/
               padding:20px 200px 100px 40px;
               /*上、右、左、下*/
               padding:20px 200px;
               /*上下、左右*/

           }
           /*创建一个子元素box2来占满box1*/
           .box2{
               height:100%;
               width:100%;
               background: yellow;
           }
       </style>
   </head>
   <body>
           <div class="box1">
               <div class="box2">我是box2</div>
           </div>

   </body>
</html>