У меня на сайте есть блок навигации. Иногда он остается наверху, а иногда добавляет ненужный верхний край. Я не уверен, что случилось. Я проверил свой веб-сайт, он не рушится ни с одним из моих div. Я очень смущен. Я пытался использовать позицию, но это не сработало. Кто-нибудь может помочь? Вот мой фрагмент кода:
.container-navbar{
background-color: #ffffff;
height: 60px;
display: flex;
justify-content: space-between;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
transition:5s;
}
.button-collapse-sidebar{
padding-top: 10px;
padding-left: 10px;
}
.button-collapse-sidebar button{
height: 40px;
width: 60px;
font-size: 20px;
border:none;
background-color: blue;
color: #ffffff;
}
.button-collapse-sidebar button:hover{
transition: 1.5s;
cursor: pointer;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
z-index: 2;
}
.user{
display: flex;
}
.user-name{
padding: 18px;
}
.user-name i{
padding-left: 5px;
}
.user-name i,a{
text-decoration: none;
}
.user-picture{
margin-top:5px;
margin-right: 5px;
width: 60px;
position: relative;
overflow: hidden;
border-radius: 50%;
height: 50px;
}
.user-picture img{
width: 100%;
margin: auto;
position: absolute;
top: 20px;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="container-navbar">
<div class="button-collapse-sidebar">
<button class="button-collapse"><i class="fa fa-bars" aria-hidden="true"></i></button>
</div>
<div class="user">
<div class="user-name">
<a href="">Admin name<i class="fas fa-circle"></i></a>
</div>
<div class="user-picture">
<img src="" alt="user-picture">
</div>
</div>
</div>
</body>
</html>
поэтому я обновляю код и добавляю тело {margin: 0; } здесь у меня есть 2 разных файла html, но с одинаковыми тегами html и css, но по какой-то причине мой основной не работает, но мой тест html работает и не добавляет ненужный верхний край.
эта работа