Question

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

CSS和HTML代码：

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

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

#boxTitle {
  margin-top: 25px;
}

.button {
  margin-top: 15px;
}

Answer 2

我认为这不是你需要的，因为它太容易了，只需添加margin-top

df = sparkSession.read.json(hdfsPath)

+-----------+---------+
|         ID|Status   |
+-----------+---------+
|Tsz3650419c|   Passed|
|Tsz3650420c|   Failed|
|Tsz3650421c|   Passed|
|Tsz3650422c|   Passed|
|Tsz3650423c|  Aborted|

body {
  background-color: #224b65;
}
#content{
  margin-top: 25px;
}
#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;
}

.button {
  display: block;
  margin-top: 20px;
}

将元素向下移动

2 个答案: