gpt4 book ai didi

html - margin-top css 属性的意外行为

转载 作者:行者123 更新时间:2023-11-28 17:46:07 24 4
gpt4 key购买 nike

我正面临一个非常简单的 margin-top 问题,它把我吓坏了。我简化了我的文档以使其可读。这是我的html文档结构

<body>
<section>

</section>

<section>
<div></div>
</section>
</body>

这是我的 CSS

section{
width: 100%;
height:768px;
background-color: red;
border-bottom: 1px solid yellow;
position: relative;
}

div{
background-color:green;
height:50px;
width:50px;

margin-top:0px;
}

divmargin-top为0时,看起来像这样: enter image description here

但是当我将它更改为 margin-top10px 时,它看起来像这样:enter image description here

我无法指出该空白是如何添加的。检查表明它是 body 的一部分。节实际上被推了下来。我期待那个小 div 相对于部分被推低。谁能解释这种奇怪的行为?

最佳答案

这里是 fiddle http://jsfiddle.net/suriyag/UhqX9/1/有满足您要求的解决方案

    section{
position:relative;
width: 100%;
height:768px;
background-color: red;
border-bottom: 1px solid yellow;
position: relative;
}

div{
position:absolute;
top:10px;
background-color:green;
height:50px;
width:50px;
}

对你的代码做了一些小改动

关于html - margin-top css 属性的意外行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23165880/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com