javascript - 为什么内联元素底部有额外的边距？

Question

我有以下测试页面。基本上，它在鼠标下方的元素周围绘制边框，并在元素的左下角显示工具提示。对于 block 元素来说，没有问题。

但是对于内联元素，突出显示的元素和工具提示之间始终存在间隙。

我尝试为这些内联元素添加 0 边距，但无济于事。有人能帮忙指出正确的方向吗？ 为了使调试更容易，我创建了这个 codepen 帖子:https://codepen.io/ogrishman/pen/gObMNWa

var tip = jQuery("<div id='tip' style='display:none;'></div>");
tip.appendTo("body");
jQuery("*").on("mouseover", function (event) {
    event.stopPropagation();
    var thisj = jQuery(this);
    var thisj_pos = thisj.offset();

    thisj.css("border", "2px solid red");
    tip.text(thisj.prop("tagName"));

    $("#tip").css({
        "top": thisj_pos.top + thisj.outerHeight(),
        "left": thisj_pos.left,
        display: "block"
    });
}).on("mouseout", function (event) {
    event.stopPropagation();
    jQuery(this).css("border", "")
});

#b {
  width: 200px;
  height: 200px;
  background: #0fa3e0;
  border: 10px solid grey;
  position: absolute;
  top: 50px;
  left: 100px;
}

#s {
  width: 50px;
  height: 50px;
  background: #ff0000;
  border: 10px solid gold;
  position: absolute;
}

#tip {
  border-radius: 0 0 5px 5px;
  border: 2px solid #000000;
  background-color: #fdf0ca;
  position: absolute;
  color: #000000;
  padding: 3px;
}

<div id="b"></div>
<div id="s"></div>
<div style="position: absolute; top: 300px;">
    <a href="#">Test anchor 1</a>
    <a href="#">Test anchor 2</a>
    <a href="#">Test anchor 3</a>
    <a href="#">Test anchor 4</a>
    <a href="#">Test anchor 5</a>
    <br />
    <span>Test span 1</span>
    <span>Test span 2</span>
    <span>Test span 3</span>
    <span>Test span 4</span>
    <span>Test span 5</span>
    <br />
    <p>test paragraph 1</p>
    <p>test paragraph 2</p>
    <p>test paragraph 3</p>
    <p>test paragraph 4</p>
    <p>test paragraph 5</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 1

这是因为您在获取元素的偏移量后应用边框。由于当涉及内联元素时，边框顶部/底部不会影响布局，因此它不会将元素向下推，并且您将得到一个与边框顶部厚度完全相同的间隙。

之前添加边框以获得正确的偏移并解决问题:

var tip = jQuery("<div id='tip' style='display:none;'></div>");
tip.appendTo("body");
jQuery("a").on("mouseover", function(event) {
  event.stopPropagation();
  var thisj = jQuery(this);
   thisj.css("border", "5px solid red");
  var thisj_pos = thisj.offset();

  tip.text(thisj.prop("tagName"));

  $("#tip").css({
    "top": thisj_pos.top + thisj.outerHeight(),
    "left": thisj_pos.left,
    display: "block"
  });
}).on("mouseout", function(event) {
  event.stopPropagation();
   jQuery(this).css("border", "")
});

#tip {
  border-radius: 0 0 5px 5px;
  border: 2px solid #000000;
  background-color: #fdf0ca;
  position: absolute;
  color: #000000;
  padding: 3px;
}

<a href="#" >Test j anchor 1</a>
<a href="#" >Test anchor 2</a>
<a href="#" >Test anchor 3</a>
<a href="#" >Test anchor 4</a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

下面是一个代码，可以更好地说明问题:

var tip = jQuery("<div id='tip' style='display:none;'></div>");
tip.appendTo("body");
jQuery("a.before").on("mouseover", function(event) {
  event.stopPropagation();
  var thisj = jQuery(this);
   thisj.css("border", "10px solid red");
  var thisj_pos = thisj.offset();

  tip.text(thisj.prop("tagName"));
  console.log(thisj_pos.top)
  $("#tip").css({
    "top": thisj_pos.top + thisj.outerHeight(),
    "left": thisj_pos.left,
    display: "block"
  });
}).on("mouseout", function(event) {
  event.stopPropagation();
   jQuery(this).css("border", "")
});
jQuery("a.after").on("mouseover", function(event) {
  event.stopPropagation();
  var thisj = jQuery(this);
  var thisj_pos = thisj.offset();
   thisj.css("border", "10px solid red");

  tip.text(thisj.prop("tagName"));
 console.log(thisj_pos.top)
  $("#tip").css({
    "top": thisj_pos.top + thisj.outerHeight(),
    "left": thisj_pos.left,
    display: "block"
  });
}).on("mouseout", function(event) {
  event.stopPropagation();
   jQuery(this).css("border", "")
});

#tip {
  border-radius: 0 0 5px 5px;
  border: 2px solid #000000;
  background-color: #fdf0ca;
  position: absolute;
  color: #000000;
  padding: 3px;
}

a {
 margin: 0 10px;
}

<a href="#" class="before">inline element</a>
<a href="#" class="after">inline element</a>
<a href="#" class="before" style="display:inline-block;">inline block element</a>
<a href="#" class="after" style="display:inline-block;">inline block element</a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

可以清楚地看到，当你添加border unline inline-block(或block)元素时，内联元素不会向下移动。使用 inline-block 在之前或之后添加边框不会产生任何影响，因为元素将始终具有相同的 top 值，但添加边框后内联元素将具有不同的 top 值: