Div 不断添加不必要的边距
[英]Div keeps adding unnecessary margin
问题描述
我的网站中有一个导航栏 div。 有时它会停留在顶部，有时它会增加不必要的 margin-top。 我不确定出了什么问题。 我检查了我的网站，它没有与我的任何 div 的任何边距一起崩溃。 我很困扰。 我尝试使用 position 但这没有用。 任何人都可以帮忙吗？ 这是我的代码片段：
.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>
所以我更新了代码并添加了 body{ margin:0; } here i have 2 different file html but with same html tag and css but for some reason my main one not working but my test html it work and not adding the unnecessary margin-top.
4 个解决方案
解决方案1
2 2020-07-11 07:17:01
当浏览器呈现 HTML 页面时，它会在您编写单一样式之前应用基本的 styles。
例如，所有浏览器中的<h1>到<h6> HTML 标签与普通文本不同：通常，它们的字体大小较大，它们的字体粗细是粗体（ font-weight: bold ），并且它们有边距顶部和底部。
虽然所有浏览器都应用其基本的 styles，但每个浏览器都有其特定的 styles 与其他浏览器不同，这当然会导致不一致的问题。 这就是你在这个问题中谈论的问题。 解决浏览器不一致问题的尝试产生了两种方法： Normalize CSS方法和CSS 重置方法。
解决方案2
1 2020-07-11 07:17:20
解决方案3
1 2020-07-11 10:17:49
至于现在，您可以习惯在 css 文件的顶部添加它：
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
这将删除所有填充和边距，并且 box-sizing 只会让您更轻松。 Mozilla 盒子尺寸.
解决方案4
0 2020-07-11 10:37:03
这是您可以为您的网站进行的简单重置：
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
当添加一个 <p> 标记div元素，边距变为父div的1/2
[英]when adding a <p> tag to div element, margin becomes 1/2 of parent div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.