如何去除Phaser 3文本的默认空白以适配容器高度

问题 #

我正尝试让文本完全适配容器的高度，已将文本字号设置为与容器高度一致，但仍存在默认空白问题，且已将内边距（padding）设为0。请问是否有方法去除文本的默认空白？

解决方案 #

这种空白主要来自两个原因：字体默认行高大于1，以及字体自身的上下留白（字符的上升/下降空间）。可以通过以下CSS设置逐一解决：

1. 清除默认行高与外边距

   .text-item {
     font-size: 容器高度值; /* 比如容器高40px，这里就设40px */
     line-height: 1; /* 强制行高等于字号，消除行高带来的上下空白 */
     margin: 0; /* 若使用p、h标签等块级元素，需清除默认外边距 */
   }
   

2. 对齐文本到容器边缘（针对字体自带留白）
   如果设置行高后仍有细微空白，可结合display和vertical-align调整文本位置：

   .text-item {
     font-size: 容器高度值;
     line-height: 1;
     margin: 0;
     display: inline-block;
     vertical-align: top; /* 或bottom，根据字体的基线位置选择 */
   }
   

3. 极端情况处理（字体留白过大）
   若上述方法仍无效，可通过容器裁剪或微调字号来填充空白：

   .container {
     height: 40px;
     padding: 0;
     overflow: hidden; /* 裁剪超出容器的字体部分 */
   }
   .text-item {
     font-size: 42px; /* 略大于容器高度，填充剩余空白 */
     line-height: 1;
     margin: 0;
   }
   

内容的提问来源于stack exchange，提问作者Newboy11