html - 向下移动元素

我为登录页面制作了一个模板，我认为到目前为止看起来还不错！但是我坚持两件事。我想将整个登录“框”下移约25px，“登录”按钮下移约10-20px。我怎样才能做到这一点？

CSS和HTML代码：

body {
  background-color: #224b65;
}
#boxTitle {
  background-color: #ffd11a;
  margin: auto;
  text-align: center;
  padding-top: 10px;
  width: 300px;
  height: 200px;
  border-top: 0px solid #ffd11a;
  border-radius: 5px 5px 0px 0px;
}
#infoBoxes {
  background-color: white;
  padding: 10px;
  border-radius: 0px 0px 5px 5px;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Please Login</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div id="content">
      <div id="boxTitle">
        <h1 class="loginTitle">Please Login</h1>
      </div>
        <div id="infoBoxes">
          <form>
              <h3 class="usernameText">Username</h3><input type="text" class="usernameBox" />
              <h3 class="passwordText">Password</h3><input type="password" class="passwordBox" />
              <input class="button" type="submit" value="Login" />
          </form>
        </div>
      </div>
  </body>
</html>

最佳答案

使用margin-top属性在元素上方添加空间：

#boxTitle {
  margin-top: 25px;
}

.button {
  margin-top: 15px;
}