title: When I hover a element, another element which both have display: inline-block, goes down?
body: <p>I'm having a some kind of serious issue about a staffs page i'm working on. I make a button which contains the staff's username when user hovers that element there's a social button has to be <strong>display: block</strong>. There's no problem with that. It becomes visible but when I hover the other element goes more or less 10px's down.<br /></p>
  
  <p>jsbin: <a href="https://output.jsbin.com/tozemihefu/" rel="nofollow">https://output.jsbin.com/tozemihefu/</a></p>
  
  <p>I will appreciate your help.</p>
  
  <hr>
  
  <h2>CODE SNIPPET:</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.yetkili {
    display: inline-block;
    padding: 10px 25px;
  }
  .yetkili img {
    border-radius: 100%;
    padding-bottom: 10px;
  }
  .yetkili div ul {
    display: none;
    list-style: none;
  }
  .yetkili div ul li {
    font-size: 10px;
    color: white;
  }
  .yetkili div {
    transition: all 0.3s ease;
    border: 3px solid #bbcada;
    padding: 5px 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 16px;
    color: #5C7A99;
    font-family: 'Montserrat', sans-serif;
    display: block;
    text-decoration: none;
  }
  .yetkili div:hover ul {
    display: block;
  }
  .yetkili div:hover {
    transition: all 0.3s ease;
    border: 3px solid #bbcada;
    background-color: #bbcada;
    padding: 5px 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 16px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    display: block;
    text-decoration: none;
  }
  h1 {
    font-family: 'Montserrat', sans-serif;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;div class="container-fluid" style="margin-top: 1%;"&gt;
    &lt;div class="row text-center"&gt;
      &lt;div class="col-sm-12 text-center"&gt;
        &lt;h1 class="anaheader"&gt;Kurucular&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="col-md-offset-3 col-md-6"&gt;
        &lt;div class="yetkili"&gt;
          &lt;img src="https://minotar.net/helm/AtomTR/128.png"&gt;
          &lt;div&gt;AtomTR
            &lt;ul&gt;
              &lt;li&gt;asd&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="yetkili"&gt;
          &lt;img src="https://minotar.net/helm/RepublicanSensei/128.png"&gt;
          &lt;div&gt;RepublicanSensei
            &lt;ul&gt;
              &lt;li&gt;asd&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>