尝试创建页边距以将页眉元素从页面顶部移开。上边距因某些原因无法正常工作。
可以在以下链接找到页面: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%;
}
答案 0 :(得分: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,我想这不是您想要做的。