我希望蓝色背景仅为稍微大于文字和图片的以溢出的蓝色背景向下。我需要添加/删除什么来实现这一点?
这就是我想要的效果
我创建了一个包含我的名字，ID和图片的柔性div:
.version2 {
background-color: lightblue;
display: flex;
justify-content: space-evenly;
}
.version2 div {
padding: 5px 0 5px 0;
align-self: center;
}
#propic{
border-radius: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyHeader</title>
<link rel="stylesheet" href="styles/stylesheet.css">
</head>
<body>
<div class="version2">
<div><strong>Name:</strong> Tahmin Ahmed </div>
<div><strong>ID:</strong> 123456</div>
<picture>
<img id="propic" src="https://i.stack.imgur.com/av1Fi.png" alt="My Profile picture">
</picture>
</div>
</body>
</html>我希望蓝色背景仅为稍微大于文字和图片的以溢出的蓝色背景向下。我需要添加/删除什么来实现这一点?
这就是我想要的效果
这是您想要的效果吗?我刚刚添加了一个固定的高度到你的外部.version2集装箱:
.version2 {
background-color: lightblue;
display: flex;
justify-content: space-evenly;
height: 2rem; /* added a fixed height */
}
.version2 div {
padding: 5px 0 5px 0;
align-self: center;
}
#propic{
border-radius: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyHeader</title>
<link rel="stylesheet" href="styles/stylesheet.css">
</head>
<body>
<div class="version2">
<div><strong>Name:</strong> Tahmin Ahmed </div>
<div><strong>ID:</strong> 123456</div>
<picture>
<img id="propic" src="https://i.stack.imgur.com/av1Fi.png" alt="My Profile picture">
</picture>
</div>
</body>
</html>