Question

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

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

我尝试为这些内联元素添加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>

您可以清楚地看到，当添加边框非行内联块（或块）元素时，内联元素不会向下移动。使用inline-block之前或之后添加边框没有区别，因为该元素将始终具有相同的最高值，但是inline元素在添加边框之后将具有不同的最高值：

Answer 2

要向行内元素添加边距，必须添加display: inline-block。我记得，display: inline没有考虑box-model。基本上，盒子模型使我们可以管理元素的边距/填充。

更多有关盒装型号的信息：https://www.w3schools.com/css/css_boxmodel.asp

Answer 3

尝试这个：

const boundingClientRect = this.getBoundingClientRect()

$("#tip").css({
    top: boundingClientRect.top + boundingClientRect.height + window.scrollY,
    left: boundingClientRect.left + window.scrollX,
    display: "block"
});

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

3 个答案: