Html offsetTop将其子元素的边距相加<；p>；

代码如下：

var testDiv=document.getElementById（“测试”）； var demoiv=document.getElementById（“演示”）； demodhiv.innerHTML=“offsetLeft:+testDiv.offsetLeft+”
offsetTop:+testDiv.offsetTop

正文{
保证金：0px 0px 0px 0px；
填充：0px 0px 0px 0px；
边框：0px 0px 0px 0px
}
#试验{
职位：相对
}

偏移量：偏移量：

这是因为

默认情况下，浏览器使用单个空行分隔段落

所以
p
得到了初始保证金。如果将其设置为
0
，则会得到预期结果：


var testDiv=document.getElementById（“测试”）；
var demoiv=document.getElementById（“演示”）；
demodhiv.innerHTML=“offsetLeft:+testDiv.offsetLeft+”
offsetTop:+testDiv.offsetTop
正文{
保证金：0px 0px 0px 0px；
填充：0px 0px 0px 0px；
边框：0px 0px 0px 0px
}
#试验{
职位：相对
}
p{margin:0}

偏移量：偏移量：

标签默认边距是外推div区域并将其向下推

如果您添加一些填充
，或者将
边距设置为0，您将获得预期值


var testDiv=document.getElementById（“测试”）；
var demoiv=document.getElementById（“演示”）；
demodhiv.innerHTML=“offsetLeft:+testDiv.offsetLeft+”
offsetTop:+testDiv.offsetTop
正文{
保证金：0；
填充：0；
边界：0；
}
#试验{
填料：2米；
位置：相对位置；
}

偏移量：偏移量：

谢谢你的帮助，但我想知道为什么它要在offsetTop中添加子元素（#demo）的2em/16px的边距（顶部和底部）。很抱歉，它的1em**@AnchalGupta引用了浏览器上
p
元素的初始样式是用这条空行（1em）将其从顶部和底部分开的。尝试更改
行高
属性，您将得到不同的结果。如果要完全控制空间，请添加
边距：0谢谢，但我不太明白第一句话，标记默认边距是外推div区域并向下推。此外，我的目标不是获得预期的产出，而是获得其背后的原因。为什么#测试的sffsetTop会在其子元素（#demo）中增加1em/16px的余量？因为offsetTop是当前元素与其最近祖先的相对位置，而最近祖先不是静态的（在本例中是静态的），所以每个浏览器都有一组默认的CSS规则。如果您创建的HTML只有一个
标记而没有样式，那么它仍然会有边距，并且该边距在其他浏览器中可以有不同的大小。您的
标记没有任何高度或尺寸，因此它遵循以下规则。