無法在普通 HTML 頁面中找出一個簡單的頂級問題

Question

這可能是最簡單的任務，但我無法理解。 我創建了一個非常簡單的 HTML 片段。 代碼筆鏈接

如果你看到筆，我有 3 個嵌套的 div， div1是我的 React 應用程序的頂級 div。 現在我的頁面主體是pink color的。 我添加了一個div => header和一個div => logo 。 現在我的 header div 是green color的。 到目前為止，一切順利，現在在我的徽標 div中，我有一個img標簽。 我不喜歡我的圖像定位，並在我的徽標 div中添加了margin-top 。 我的意圖是，我的徽標 div應該從header div的頂部留出空白，這是green 。 但相反，它在我的body top和我的header div之間插入了一個邊距。

我完全沒有想法為什么會這樣？ 有什么幫助嗎？

Answer 1

#logo 的邊距超出了父元素。 看看能不能幫到你-> CSS保證金恐怖； Margin 在父元素之外添加空間

Answer 2

 body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }.App { text-align: center; } img { width: 10%; height:50px; float: left; margin-left: 50px; margin-top: 25px;important; }

 <html lang="en"> <link rel="stylesheet" href="style.css"> <body style="background: pink;/* top: 0; */"> <div id="root" style=" /* top: 0px; */ /* position: absolute; */ "> <div style="background: rgb(203, 233, 215); height: 100px"> <div id="header"> <div id="logo" class="zbuda"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Logo_NIKE.svg/1200px-Logo_NIKE.svg.png"> </div> </div> </div> </div> </body> </html>