如何让flex布局div背景仅略大于文本，且内部图片向下溢出

修改方案 #

你需要对CSS代码做以下调整即可实现需求： #

需要删除的代码

移除.version2类中的justify-content: space-evenly;属性，该属性会让容器撑满整行宽度、元素均匀分布，不符合背景仅包裹内容的要求。 #

需要新增的代码

1. 给.version2类新增以下属性：

/* 让容器宽度仅适配内部内容总宽度 */
width: fit-content;
/* 控制背景边缘和内部文本的间距，实现背景仅比文本稍大的效果 */
padding: 8px 24px;
/* 控制姓名、ID、头像三个元素之间的间距，可自行调整数值 */
gap: 32px;
/* 让三个元素在垂直方向居中对齐 */
align-items: center;

2. 给#propic选择器新增以下属性：

/* 负值下外边距让头像向下溢出父容器的蓝色背景，数值可根据头像大小按需调整 */
margin-bottom: -20px;

修改后完整CSS代码

.version2 {
    background-color: lightblue;
    display: flex;
    width: fit-content;
    padding: 8px 24px;
    gap: 32px;
    align-items: center;
}

.version2 div {
    padding: 5px 0 5px 0;
    align-self: center;
}

#propic{
    border-radius: 100%;
    margin-bottom: -20px;
}

修改后浅蓝色背景会刚好包裹姓名、ID区域，不会撑满整行，头像下半部分会溢出蓝色背景区域，符合预期效果。

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