Html 如何移动此搜索表单？（CSS）

现在我有一个这样的页面

我想得到的是这样的东西：

我一直在寻找教程和类似的东西，但我仍然被困在这里。我的代码是：

HTML 我刚刚发布了CSS代码，我认为解决这个问题是必要的。大部分CSS代码不是我的，我对CSS很陌生。我认为解决方法是正确地使用

位置

，但我还没有正确地使用它。有什么想法吗？请，如果我的问题不正确，请让我知道编辑它

---

谢谢

这是您CSS的速记页边距中的

页边距顶部：150px

：页边距：150px自动50px自动。将其更改为较小的数字将减小间隙的大小。

在这种情况下，您应该减小边距

.form-wrapper {
    width: 450px;
    padding: 0;
    margin: 50px auto 50px auto;
    border-radius: 10px;
}

但是有了这个，你必须增加你的背景颜色的容器填充

#containerHeader {
    background-color: #D1D0CE;
    text-align: center;
    padding-bottom: 28px;
}

---

您需要更改边距上限值。

---

在你的情况下是150像素

你的保证金错了

.form-wrapper {
    width: 450px;
    padding: 0;
    margin: 30px auto;
    border-radius: 10px;
}

---

这是因为你的利润

.form-wrapper {
    width: 450px;
    padding: 0;
    margin: 150px auto 50px auto;
    border-radius: 10px;
}

由于要缩短文本和搜索表单之间的距离，因此需要更改

边距顶部

的值，在本例中该值为

150px

。例如，尝试将其更改为

40px

。从左到右的4个值表示边距

顶部

，

右侧

，

底部

和

左侧

---

这里有一些。

表单的上边距为150px，显然它位于标题下方150px。谢谢这两个，你是对的。已经解决了；）没错，我没有意识到这一点。我还以为是关于位置的。谢谢@JohnTobin

.form-wrapper {
    width: 450px;
    padding: 0;
    margin: 30px auto;
    border-radius: 10px;
}

.form-wrapper {
    width: 450px;
    padding: 0;
    margin: 150px auto 50px auto;
    border-radius: 10px;
}