未应用边际价值[重复]

Question

此问题已经在这里有了答案：

• Margin top in inline element1个答案
• How is the margin-top percentage calculated?2个答案

[尝试创建页边距以将页眉元素从页面顶部移开。上边距由于某些原因无法正常工作。

可以在此链接找到该页面：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，我想这不是您想做的。