Header中div元素溢出原因及标题间距调整方法咨询

我正在开发个人作品集网站，采用HTML、CSS和JavaScript技术。当前调试Header样式（添加亮色以验证元素宽高）时，发现绿色的.header-title div元素出现溢出，无法确定原因；同时希望让"My Portfolio"与"Front End Developer"的间距更为紧凑，求解决方法。

相关代码 #

CSS代码 #

body{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

.hero-page-container{
    height:100vh;
    width:100vw;
    padding:0px 40px;
    box-sizing: border-box;
}

header{
    display: flex;
    align-items: center;
    height:10%;
    justify-content: flex-end;
    background-color: aqua;
}

.header-title{
    margin-right: auto;
    align-items: center;
    background-color: green;
}

.header-title h1{
    background-color: yellow;
}

.header-title p{
    background-color: orange;
}


ul{
    display:flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

header ul li{
    display: inline-block;
    margin-left:40px;
}

header ul li a{
    text-decoration: none;
}

.header-contact-btn{
    text-decoration: none;
    margin-left:40px;
}

.hero-content{
    width:100%;
    background-color: red;
    text-align: center;
    height:50vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <section class="hero-page-container">
        <header>
            <div class="header-title">
                <h1>My Portfolio</h1>
                <p>Front End Developer</p>
            </div>
            <nav>
                <ul>
                    <li><a class="active" href="#home">Home</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#about">About</a></li>
                </ul>
            </nav>
            <a href="#" class="header-contact-btn">Contact</a>
        </header>
        <div class="hero-content">
            <div>
                <h1>MY NAME</h1>
                <button>Hire Me</button>
                <button>Let's Talk</button>
            </div>
        </div>
    </section>
</body>
</html>

问题截图 #

一、解决.header-title溢出问题 #

原因分析 #

1. header设置了固定高度height:10%，但h1和p标签默认带有外边距（margin），导致内容总高度超过header的固定高度，引发溢出。
2. .header-title未设置为flex容器，添加的align-items: center属性无效，无法控制内部元素的排版，间接加剧了溢出风险。

修复代码 #

header{
    display: flex;
    align-items: center;
    min-height: 10%; /* 用min-height替代固定height，适配内容高度 */
    justify-content: flex-end;
    background-color: aqua;
    box-sizing: border-box; /* 确保padding不会额外增加容器高度 */
}

.header-title{
    margin-right: auto;
    display: flex; /* 将.header-title设为flex容器 */
    flex-direction: column; /* 让内部元素垂直排列 */
    align-items: center; /* 现在该属性生效，居中对齐文本 */
    background-color: green;
}

.header-title h1{
    background-color: yellow;
    margin: 0; /* 重置默认外边距 */
}

.header-title p{
    background-color: orange;
    margin: 0; /* 重置默认外边距 */
}

二、缩小标题与副标题的间距 #

可以通过两种方式实现：

方式1：使用margin控制 #

给h1设置较小的底部外边距，直接控制两个元素的间距：

.header-title h1{
    background-color: yellow;
    margin: 0 0 6px 0; /* 仅保留底部6px间距，数值可按需调整 */
}

.header-title p{
    background-color: orange;
    margin: 0;
}

方式2：使用flex的gap属性（更简洁） #

利用flex容器的gap属性，统一控制内部元素的间距：

.header-title{
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: green;
    gap: 6px; /* 直接设置h1和p之间的间距，数值可按需调整 */
}

.header-title h1{
    background-color: yellow;
    margin: 0;
}

.header-title p{
    background-color: orange;
    margin: 0;
}

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