Html 在标题横幅和导航菜单之间添加一个小空间

我试图在导航菜单和列表之间添加一个728x90像素的小横幅。我目前使用的代码是：

<center><a href="https://imagesite.com/image.gif" /></a></center>

---

我用中间标签把横幅放在中间。我只想在横幅顶部添加一些空间，因为它的底部已经有一些空间了。我需要横幅具有响应性。

您使用边距或填充在元素周围添加空间

<center style="margin-top:15px"><a href="https://imagesite.com/image.gif" /></a></center>

---

或者只需在居中项目的顶部添加边距和/或填充物即可

<center style="margin-top: 50px"><a href="https://imagesite.com/image.gif"/></center>

---

请恕我直言，不要使用

标签。这就是将样式移到HTML中，这是不可取的

此外，就可维护性而言，内联样式（

）非常糟糕。除非绝对必要，否则避免这些

相反，使用CSS，并结合提供有意义的类或ID的标记

关于如何做到这一点，一个更有用的例子是：

HTML:

更新： 如果希望将相同的样式应用于页面上的多个元素，则可以使用类，而不是

ID

（ID应该是唯一的-页面上只有一个元素应该具有给定的ID）：

HTML:

---

谢谢，这会使横幅响应吗？我的网站已经响应了。边距或填充不会影响响应。我认为最好解释一下，他使用的是过时的标记（中间），而不是添加内联样式；）导航菜单在哪里？我们只看到Images的代码，我认为最好解释一下，他使用的是一个过时的标记（中间），而不是添加一个内联样式；）至少有一个解释得很好、速度不快的答案，而无需简单地添加内联页边距；）谢谢Cale，我可以用这个代码作为页脚上的横幅吗？只需更改div id？@John你可以用class代替id，然后你就可以same@John-我已经更新了答案，以反映使用类的情况（以便可以在同一页面上的多个元素上使用）

<center style="margin-top: 50px"><a href="https://imagesite.com/image.gif"/></center>

<div id="banner"><a href="https://imagesite.com/image.gif" /></a></div>

#banner {
    text-align: center;
    margin: 10px 0 10px 0; /* Top Right Bottom Left */
}

/* if the image must be responsive.... */
#banner img {
    width: 100%;
    height: auto;
}

<div class="banner"><a href="https://imagesite.com/image.gif" /></a></div>

.banner {
    text-align: center;
    margin: 10px 0 10px 0; /* Top Right Bottom Left */
}

/* if the image must be responsive.... */
.banner img {
    width: 100%;
    height: auto;
}