无法在普通 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>