在HTML中调试距离盒子头的高度，可以使用以下步骤：

1、打开浏览器开发者工具：

在Chrome浏览器中，按下F12键或者右键点击页面，选择“检查”选项。

在Firefox浏览器中，按下F12键或者右键点击页面，选择“检查元素”选项。

在Safari浏览器中，按下Option + Command + I组合键或者右键点击页面，选择“检查元素”选项。

2、定位到目标元素：

在开发者工具的顶部导航栏中，选择“Elements”（元素）选项卡。

在左侧的元素面板中，可以通过单击页面上的特定元素来选择它，也可以通过输入元素的选择器（如类名、ID等）来定位元素。

3、查看和修改样式：

在右侧的样式面板中，可以看到所选元素的CSS样式。

可以手动修改样式属性的值，例如调整高度（height）或边距（margin）等。

修改后的效果会实时显示在页面上。

4、使用布局工具：

在开发者工具的顶部导航栏中，选择“Layout”（布局）选项卡。

在布局工具中，可以模拟不同设备和屏幕尺寸下的布局效果。

可以调整盒子的宽度、高度、边距等属性，并观察它们在不同设备上的表现。

5、使用计算盒模型的工具：

在开发者工具的顶部导航栏中，选择“Console”（控制台）选项卡。

在控制台中，输入以下代码来计算盒子的高度：getComputedStyle(document.querySelector('yourelementselector')).getPropertyValue('height')，将yourelementselector替换为你要调试的元素的选择器。

按下回车键后，控制台会显示计算出的高度值。

通过以上步骤，你可以在HTML中调试距离盒子头的高度，并实时查看和修改样式效果。