Question

我的网站上有一个导航栏div。有时它停留在顶部，有时它会添加不必要的边距顶部。我不知道怎么了。我检查了我的网站，发现我的任何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却可以正常工作，并且没有添加不必要的margin-top。

Answer 1

当浏览器呈现HTML页面时，它会应用基本样式，甚至没有编写任何样式。

例如，所有浏览器中的npm i bcrypt --save至const [dimensions, setDimensions] = React.useState({ width: window.innerWidth, height: window.innerHeight, }); console.log(dimensions); const handleResize = () => { setDimensions({ width: window.innerWidth, height: window.innerHeight, }); } React.useEffect(() => { window.addEventListener("resize", handleResize, false); }, []); HTML标记与普通文本不同：通常，它们的字体大小较大，字体粗细（<h1>），并且在顶部和底部都有边距。

尽管所有浏览器都使用其基本样式，但是每种浏览器都有其特定样式，这与其他浏览器不同，这当然会导致不一致问题。这就是您在这个问题中谈论的问题。解决浏览器不一致问题的尝试产生了两种方法： the Normalize CSS 方法和 CSS Reset approach 。

Answer 2

如果您正在谈论此margin，则只需添加

   body{
       margin : 0px;
   }

在您的CSS中。那应该解决您的问题。如果您只想删除顶部的边距，请改用margin-top。

Answer 3

就目前而言，您可以习惯于将其添加到css文件的顶部：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

这将删除所有填充和边距，而框大小将使您更轻松。 Mozilla box-sizing。

Answer 4

这是您可以为您的网站执行的简单重置：

*,
*::before,
*::after {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

Div不断增加不必要的保证金

4 个答案: