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

Question

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

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

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

Answer 1

非常尊重，不要使用 <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;
}