学习HTML与CSS的第七天————内边距、外边距_html设置内边距为什么会变化-CSDN博客

本文链接：https://blog.csdn.net/weixin_44055237/article/details/104931311

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8"/>
      <title></title>
      <style type="text/css"> 
      .box1{
        width: 200px;
        height: 200px;
        background-color: green;
        border: red solid 10px;
        /* 
          内边距（padding），指的是盒子的内容区与盒子边框之间的距离

           一共有四个方向的内边距，可以通过：
             padding-top
             padding-right
             padding-bottom
             padding-left
              来设置四个方向的内边距
            

            内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距
            盒子的大小由内容区、内边距和边框共同决定
            
         */
        /*  padding-top: 100px;
         padding-right: 100px;
         padding-bottom: 100px;
         padding-left: 100px; */
         /* 
            使用padding可以同时设置四个边框的样式，用法和border-width一样
          */
      }
      .box2{
        width: 200px;
        height: 200px;
        background-color: yellow;
      }
      </style>
    </head>
    <body>
      <div class="box1">
        <div class="box2"></div>
      </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8"/>
      <title></title>
      <style type="text/css"> 
      .box{
        width: 200px;
        height: 200px;
        background-color:#bfa;
        border: red solid 10px;
        /* 
           外边距指的是当前盒子与其他盒子之间的距离
           不会影响可见框的大小，而是会影响到盒子的位置
           盒子有四个方向的外边距：
              margin-top
              margin-right
              margin-left
              margin-bottom
              由于页面中的元素都是靠左排放
              所以设置左外边框或上外边框时，会导致原来盒子的位置改变
              但是设置右外边距或下外边距时，会导致其他盒子的位置改变
         */
         /* 设置box的上外边距，盒子上边框和其他盒子的距离 */
         margin-top: 100px;
         /*  设置box的左外边距，盒子左边框和其他盒子的距离 */
       /*   margin-left: 100px; */
         margin-bottom: 100px;
         /* 
           外边距也可以指定为一个负值，
            如果外边距设置的是负值，则元素会向反方向移动
          */
          margin-left: -100px;
      }
      .box2{
        width: 200px;
        height: 200px;
        background-color: yellow;
        /* 
        margin还可以设置为auto，auto一般只设置给水平方向的margin
         如果只指定，左外边距或者右外边距的margin为auto则会讲外边距设置为最大值
         垂直方向外边距如果设置为auto，则外边距默认就是0


         如果left和right同时设置为auto，则会将两侧的外边距设置为相同的值
          就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto
          以使子元素在父元素中水平居中

         */
         /* margin-left: auto; */
         margin-top: auto;

         /* 外边距同样可以使用简写属性margin，规则和padding一样 */
      }
      </style>
    </head>
    <body>
      <div class="box"></div>
      <div class="box2"></div>
    </body>
</html>