如何查看HTML元素的基线？

Question

每个浏览器的devtools都会显示一个元素的内容，填充，边框和边距框。有什么办法让浏览器（任何浏览器）向我展示元素的底线？这对调试行内盒对齐将有很大的帮助。

Answer 1

这不会完全回答你的问题，但我希望它可以至少使用一些 ......或者它甚至会激励某人想出一个更好的！

诀窍是a）计算基线的位置，b）使这些信息适用于所有元素。

计算基线的方法是令人惊讶的非直接的：我们需要创建两个元素，其中之一具有字体大小0，然后计算它们之间的顶部位置的差。
为了把这个计算到所有的HTML元素，我们使用defineProperty方法到一个新的属性添加到HTMLElement类的原型。

// the main functionality 
 
Object.defineProperty(Element.prototype, 'baselinePosition', 
 
{ 
 
    get: function() { 
 
    var fs0 = document.createElement('span'); 
 
    fs0.appendChild(document.createTextNode('X')); fs0.style.fontSize = '0'; fs0.style.visibility = 'hidden'; 
 
    var fs1 = document.createElement('span'); 
 
    fs1.appendChild(document.createTextNode('X')); 
 
    this.appendChild(fs1); this.appendChild(fs0); 
 
    var result = fs0.getBoundingClientRect().top - fs1.getBoundingClientRect().top; 
 
    this.removeChild(fs0); this.removeChild(fs1); 
 
    return result; 
 
    }, 
 
    enumerable: true 
 
}); 
 

 
// and a test run. 
 
var pos = document.getElementById('test').baselinePosition; 
 
console.log('The baseline is at ' + pos + ' px.');

<p id="test">This is the test.</p>

这里需要说明的是，你将需要一个浏览器，可以显示HTML元素节点的所有属性。到目前为止，我发现的唯一一个就是SeaMonkey的DOM Inspector。

其他浏览器没有任何显示的JavaScript节点属性的能力，或者他们只显示了内置的，而不是在用户添加的。

无论如何，希望这会有所帮助！