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

Question

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

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

我正在使用中心标签将横幅放在中间。我只是想在横幅顶部添加一些空间，因为底部已有一些空间。我需要横幅才能做出回应。

Answer 1

您可以尝试在居中项目的顶部添加边距和/或填充

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

Answer 2

非常尊重，不要使用<center>标签。这就是将样式转移到HTML中，这不是优选/期望的。

此外 - 内联样式（<center style="margin-top: 10px;">）在可维护性方面非常糟糕。除非绝对必要，否则请避开

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

如何执行此操作的更有用示例将是：

HTML：

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

CSS（最好在样式表中）：

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

更新：如果您希望将相同的样式应用于页面上的多个元素，那么您可以使用类来代替ID（它应该是唯一的 - 页面上只有一个元素应该具有给定的ID）：

HTML：

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

CSS（最好在样式表中）：

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

Answer 3

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

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

你可以用于每一方

margin-top
margin-right
margin-bottom
margin-left

只是金margin