html - offsetTop 将其子元素 的边距相加

Question

这是代码:

var testDiv = document.getElementById("test");
var demoDiv = document.getElementById("demo");
demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;

body {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  border: 0px 0px 0px 0px
}

#test {
  position: relative
}

<div id="test">
  <p id="demo">offsetLeft: <br>offsetTop: </p>
</div>

代码输出:
左偏移:0
偏移顶部:16

出于某种原因，它将 <p> 的空格加起来。 tag(即 1em+1em=8px+8px=16px)，它是 #test 的 OffsetTop 中的 #test 的子项。

Look at the portion of page when #test is selected

Look at when the p tag with id demo is highlighted

预期输出:
左偏移:0
偏移顶部:0

Answer 1

这是因为

By default, browsers separate paragraphs with a single blank line MDN

所以 p获得初始 margin 。如果您将其设置为 0它会给你预期的结果:

var testDiv = document.getElementById("test");
var demoDiv = document.getElementById("demo");
demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;

body {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  border: 0px 0px 0px 0px
}

#test {
  position: relative
}

p {margin: 0}

<div id="test">
  <p id="demo">offsetLeft: <br>offsetTop: </p>
</div>