Div adding a lot of top margin in flex container causing alignment issues

user_7942553 0
Viewed 37

I am working in bootstrap 5 with flex. I want an image to align with some content to the right of it, but when I align vertically nothing happens to the content on the right. It appears to be margin in the "bob" div, but it does not show up in the inspect. Adding mt-0 doesn't help either. I am all out of ideas. Below is a code snippet that reproduces my problem.

.profile-name{
    display: flex;
    align-items: center;
}

.profile_image{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.location-time{
    font-size: 12px;
    line-height: 1px;
    display: flex;
    align-items: center;
    gap: 5px;
}
<head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- CSS only -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
      <link href="/static/css/style.css" rel="stylesheet">
      <script src="https://js.stripe.com/v3/"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    </head>
<body>
  <div>
I want the image on the left to align vertically with the div "bob" and "5 hrs ago". For some reason where it says "bob" there is a massive space above.
  </div>

<div class="profile-name">
  <img src="https://blog.gordonturner.com/wp-content/uploads/2020/06/dashboard-dual-screen.jpg" class="profile_image" />
  <div>
    <div id="post_top">bob </div>
    <div id="post_top2" class="location-time">5 hrs ago</div>
  </div>
</div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

</body>

bootstrap-5 flexbox twitter-bootstrap css html
2 Answers

You can add margin bottom for location-time div margin-bottom: 10px; . You are having this issue because of line-height: 1px. If you cancel this without adding margin-bottom, you can achieve a result too

.profile-name{
    display: flex;
    align-items: center;
}

.profile_image{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.location-time{
    font-size: 12px;
    line-height: 1px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
}
<head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- CSS only -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
      <link href="/static/css/style.css" rel="stylesheet">
      <script src="https://js.stripe.com/v3/"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    </head>
<body>
  <div>
I want the image on the left to align vertically with the div "bob" and "5 hrs ago". For some reason where it says "bob" there is a massive space above.
  </div>

<div class="profile-name">
  <img src="https://blog.gordonturner.com/wp-content/uploads/2020/06/dashboard-dual-screen.jpg" class="profile_image" />
  <div>
    <div id="post_top">bob </div>
    <div id="post_top2" class="location-time">5 hrs ago</div>
  </div>
</div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

</body>

user_135448490

You can try doing this:

html:

 <div class="bob_and_text">
     <div id="post_top">bob </div>
     <div id="post_top2" class="location-time">5 hrs ago</div>
 </div>

css:

 .profile-name{
     display: flex;
     align-items: center;
     position: relative;
 }
 .bob_and_text{
     position: absolute;
     top: -2px;
     left: 35px;
 }
user_105357270
Related