margin-top 值未被应用

Question

正在尝试创建边距以将页眉元素移离页面顶部。 Margin-top 出于某种原因无法正常工作。

可在此处找到该页面 link：https://jevoncochran.github.io/Documents/My%20Site/html/bd_index.html

HTML:

<container class="universal-header">
    <div class="header-top">
        <div class="social-media">
            <i class="fab fa-youtube-square" style="font-size: 2.5rem"></i>
            <i class="fab fa-instagram" style="font-size: 2.5rem"></i>
            <i class="fab fa-facebook" style="font-size: 2.5rem"></i>
            <i class="fab fa-pinterest" style="font-size: 2.5rem"></i>
            <i class="fab fa-twitter-square" style="font-size: 2.5rem"></i>
        </div>
        <nav>
            <a href="#">Home</a>
            <a href="#">Stories</a>
            <a href="#">Travel Resources</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
            <a href="#">Shop</a>
        </nav>
    </div>

    <h1>Black Diasporer</h1>
</container>

CSS:

.universal-header {
  margin-top: 5%;
}

Answer 1

将 <container> 替换为 <div>，您的保证金就可以申请了。原因是 <container> 不是有效的 HTML 标记，浏览器不知道如何显示它并忽略它。

<div class="universal-header">
    <div class="header-top">
        <div class="social-media">
            <i class="fab fa-youtube-square" style="font-size: 2.5rem"></i>
            <i class="fab fa-instagram" style="font-size: 2.5rem"></i>
            <i class="fab fa-facebook" style="font-size: 2.5rem"></i>
            <i class="fab fa-pinterest" style="font-size: 2.5rem"></i>
            <i class="fab fa-twitter-square" style="font-size: 2.5rem"></i>
        </div>
        <nav>
            <a href="#">Home</a>
            <a href="#">Stories</a>
            <a href="#">Travel Resources</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
            <a href="#">Shop</a>
        </nav>
    </div>

    <h1>Black Diasporer</h1>
</div>

浏览器中的自定义 HTML 元素被处理为 web components，我想这不是您想要做的。

margin-top 值未被应用

Margin-top value not being applied

css

margin