如何让username和timestamp两个div元素向下微调且不影响整个post？

需要让以下代码中的.username和.timestamp两个div元素向下轻微偏移：

<div class="username-and-timestamp">
    <div class="username">RandomDude</div>
    <div class="timestamp">17 minutes ago.</div>
</div>

尝试给.username-and-timestamp设置margin或line-height属性时，无论正负像素值都无效，还会导致整个.post元素向下移动。

完整代码参考 #

CSS代码： #

:root {
    --primary: #161720;
    --primary-lightened: #2A2B35;
}

html {
    background-color: var(--primary)
}

.post {
    width: 400px;
    border-radius: 2%;
    background-color: var(--primary-lightened);
    position: relative;
}

.third-line {
    position: absolute;
    top: 12%;
    width: 400px;
    height: 2.5px;
    background-color: var(--primary);
}

.username {
    font-size: 18px;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
}

.timestamp {
    font-size: 15px;
    color: gray;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.info {
    padding-left: 65px;
}

.profile-picture {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    left: 10px;
}

.badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 20px;
    height: auto;
}

.post-text {
    font-size: 17px;
    color: white;
    font-family: "Mukta", sans-serif;
    padding: 20px;
    display: block;
}

.post-actions {
    display: flex;
    justify-content: space-around;
    color: white;
    padding-bottom: 20px;
}

.post-actions i:hover {
    color: pink;
}

.number {
    font-size: 16.5px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight: normal;
}

HTML代码： #

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/main/main.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="{{ url_for('static',filename='/scripts/main/main.js') }}"></script>
    <title>User</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Mukta:wght@200;300;400;500;600;700;800&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    <div class="post">
        <div class="info">
            <div class="avatar-container">
                <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Profile Picture"
                    class="profile-picture">
                <img class="badge"
                    src="https://cdn.discordapp.com/attachments/1191384595938164766/1224995524910907392/mod_badge.png?ex=661f84fc&is=660d0ffc&hm=e810c73ddf07d60a369ed7814135bdb7a59bb4be3edc32c6fd8891705967a0bb&"
                    alt="Badge" title="This post was made by an admin.">
            </div>
            <div class="username-and-timestamp">
                <div class="username">RandomDude</div>
                <div class="timestamp">17 minutes ago.</div>
            </div>
        </div>
        <div class="third-line"></div>
        <div class="post-content">
            <span class="post-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
                a galley of type and scrambled it to make a type specimen book. It has survived not only five
                centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
                popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
                more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
                Ipsum.</span>
        </div>
        <div class="post-actions">
            <i class="fa fa-thumbs-up"><span class="number"> 7221</span></i>
            <i class="fa fa-share"><span class="number"> 106</span></i>
        </div>
    </div>
</body>

</html>

问题原因 #

.profile-picture使用绝对定位脱离了文档流，但.info容器没有设置顶部内边距或最小高度来支撑空间。调整.username-and-timestamp的margin时，会改变.info的整体高度，进而带动.post容器下移，同时绝对定位的.third-line也会因.info高度变化出现位置偏差。

解决方案 #

方法1：给.info添加上内边距（最稳定） #

直接给.info设置顶部内边距，让用户名区域自然下移，不影响其他元素布局：

.info {
    padding-left: 65px;
    padding-top: 8px; /* 根据需求调整偏移量 */
}

方法2：给.username-and-timestamp设置上边距（需避免margin塌陷） #

给.username-and-timestamp加margin-top，同时给.info设置最小高度防止塌陷：

.info {
    padding-left: 65px;
    min-height: 50px; /* 和头像高度匹配，防止容器塌陷 */
}

.username-and-timestamp {
    margin-top: 8px; /* 调整偏移量 */
}

方法3：使用相对定位偏移 #

通过相对定位的top属性移动目标元素，不会改变容器高度，但需注意避免和下方元素重叠：

.username-and-timestamp {
    position: relative;
    top: 8px; /* 调整偏移量 */
}

如果偏移后和.third-line重叠，需要同步调整.third-line的top值，比如改为top: 15%。

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