Question about 16d

[StudioProgrammar]

Hey, could someone explain to me why we had to use display: inline-block in the .profile-picture-container in lesson 16d? This lesson is about creating and showing a tooltip for the channel picture. When I removed the line, there wasn't a noticeable difference to me. Here's the code from the solution:

HTML
...

  <div class="video-preview">
    ...
    <div class="video-info-grid">
      <div class="channel-picture">
        <div class="profile-picture-container">
          <a href="https://youtube.com/c/mkbhd" target="_blank">
            <img class="profile-picture" src="channel-pictures/channel-1.jpeg">
          </a>
          <div class="channel-tooltip">
            <img class="channel-tooltip-picture" src="channel-pictures/channel-1.jpeg">
            <div>
              <div class="channel-tooltip-name">
                Marques Brownlee
              </div>
              <div class="channel-tooltip-stats">
                15M subscribers
              </div>
            </div>
          </div>
        </div>
      </div>
      ...
    </div>
  </div>

...

CSS:

.profile-picture-container {
position: relative;
display: inline-block;
}

.channel-tooltip {
background-color: white;
width: 200px;
padding: 12px 12px;
box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.3);
border-radius: 6px;
position: absolute;
top: 55px;
z-index: 300;

opacity: 0;
pointer-events: none;

display: flex;
align-items: center;
transition: opacity 0.15s;
}

.profile-picture-container:hover .channel-tooltip {
opacity: 1;
}

.channel-tooltip-picture {
width: 50px;
height: 50px;
border-radius: 50px;
margin-right: 8px;
}

.channel-tooltip-name {
font-family: Roboto, Arial;
font-weight: bold;
font-size: 16px;
margin-bottom: 4px;
}

.channel-tooltip-stats {
font-family: Roboto, Arial;
color: rgb(96, 96, 96);
font-size: 14px;
}

Thanks in advance!

[Titiksha-rgb]

You did not see any noticeable changes, because those video grids were later enhanced to flexbox, the flexbox technique with flex-direction: row property, which is an alternative and better method to put videos side-by-side, on the contrast, flex-direction: column would be similar but enhanced to display:block property. I hope this explanation would help.