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.