内外边距 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <!--外边距的妙用：居中元素！
  margin: 0 auto;
  -->
  <style>
    #box{
      width: 300px;
      border: 1px solid black;
      margin: 0 auto;
    }
    /*
    顺时针旋转  margin:0
    margin:0 1px 上下为0 左右为1px
    margin:0 1px 2px 3px 上为0 右为1px 下为2px 左为3px
    */
    h2{
      font-size: 16px;
      background: coral;
      line-height: 30px;
      margin: 0;
    }
    form{
      background: coral;
    }
    input{
      border: 2px solid black;
    }
    div:nth-of-type(1){
      border: 2px solid #88ec85;
      padding: 0 3px;
    }
  </style>

</head>
<body>
<div id="box">
  <h2>用户登录</h2>
  <form action="#">
    <div>
      <span>用户名:</span>
      <input type="text">
    </div>
    <div>
      <span>密码:</span>
      <input type="text">
    </div>
    <div>
      <span>邮箱:</span>
      <input type="text">
    </div>

  </form>
</div>

</body>
</html>

盒子的计算方式：你这个元素到底多大？

margin + border + padding + 内容宽度

posted @ 2022-04-11 23:26  少时凌云志  阅读(34)  评论(0)    收藏  举报