如何调整行高且不破坏文本hitbox以实现Flex垂直居中？

要解决这个问题，核心是不要通过修改行高（line-height）来控制元素间距——这会破坏元素自身的盒模型（也就是你说的hitbox）。正确的做法是直接调整元素之间的外部间距，或者用Flex布局的间距属性来控制，同时保留元素正常的行高。

方案一：调整标题的下外边距（最简单直接） #

直接给<h1>设置margin-bottom，缩小它和下方<p>的间距，两个元素的盒模型都会保持完整，hitbox不会异常。

*{
    margin: 0;
    padding: 0;
}

header{
    text-align: center;
    background-color: rgb(61, 61, 61);
    padding: 15px;
}

/* 调整h1的下外边距来控制和标语的间距 */
header h1{
    margin-bottom: 8px; /* 数值可根据需求自由调整 */
}

方案二：用Flex布局实现垂直居中+可控间距 #

如果需要让标题和标语在Header内垂直居中，同时控制间距，可以用Flex的gap属性（或子元素的margin），同时保证元素行高正常：

*{
    margin: 0;
    padding: 0;
}

header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(61, 61, 61);
    padding: 15px;
    gap: 8px; /* 直接设置两个子元素的间距，不破坏盒模型 */
}

/* 显式设置正常行高，确保元素hitbox完整 */
header h1, header p{
    line-height: normal;
}

为什么之前的方法会出问题？ #

你之前修改<p>的line-height: 5px，会让<p>的行高远小于文本本身的高度，导致元素的盒模型高度被强行压缩，hitbox自然会异常缩小。而上面的两种方法，都是通过控制元素之间的外部间距来缩小距离，完全不会影响单个元素自身的盒模型，所以hitbox会保持完整，同时也能满足垂直居中的需求。

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