时间戳

首页 > 解决方案 > 为什么这个边距在这里？

html - 为什么这个边距在这里？

问题描述

我正在制作个人资料卡，并在 div(.profile-card) 中制作了 div(.pic) 以让用户显示他们的个人资料照片。我在 .pic 的右边发现了奇怪的边距你知道为什么吗？

body {
  height: 100vh;
  background-color: #40407a;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.profile-card {
  background-color: #2c2c54;
  display: inline-block;
  padding: 30px 40px;
  text-align: center;
}

.pic {
  width: 50px;
  height: 50px;
  border: 1px solid #33d9b2;
  border-radius: 50%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="profile-card">
    <div class="pic">

    </div>
    <div class="name">
      <span>Name here</span>
    </div>
  </div>
</body>

</html>

标签： htmlcss

解决方案

只是用来margin: auto;把它放在中心。

body {
  height: 100vh;
  background-color: #40407a;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.profile-card {
  background-color: #2c2c54;
  display: inline-block;
  padding: 30px 40px;
  text-align: center;
}

.pic {
  width: 50px;
  height: 50px;
  border: 1px solid #33d9b2;
  border-radius: 50%;
  margin: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="profile-card">
        <div class="pic">

        </div>
        <div class="name">
            <span>Name here</span>
        </div>
    </div>
</body>
</html>

推荐阅读