Why is this margin here?

Question

I am making a profile card and I made div(.pic) in div(.profile-card) to let user show their profile photo. and i found weird margin at the right of the .pic Do you know why?

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>

Each element has default margin. You are able to remove it. – Ali Ahmadi Feb 10 '21 at 08:37 — Ali Ahmadi, Feb 10 '21 at 08:37
Using `margin: auto;` on `.pic` is enough. – Ali Ahmadi Feb 10 '21 at 08:54 — Ali Ahmadi, Feb 10 '21 at 08:54

score 0 · Answer 1 · answered Feb 10 '21 at 08:47

Just use margin: auto; to have it in center.

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>

score 0 · Answer 2 · answered Feb 10 '21 at 08:49

I think you have aligning issue. I added this into .profile-card

  display: flex;
  flex-direction: column;
  align-items: center;

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;
  display: flex;
  flex-direction: column;
  align-items: 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"  style="justify-text: center;">
        <div class="pic">

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

Why is this margin here?

2 Answers2