alperb alperb - 2 months ago 7
CSS Question

When I hover a element, another element which both have display: inline-block, goes down?

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 display: block. There's no problem with that. It becomes visible but when I hover the other element goes more or less 10px's down.


jsbin: https://output.jsbin.com/tozemihefu/

I will appreciate your help.




CODE SNIPPET:





.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;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" style="margin-top: 1%;">
<div class="row text-center">
<div class="col-sm-12 text-center">
<h1 class="anaheader">Kurucular</h1>
</div>
<div class="col-md-offset-3 col-md-6">
<div class="yetkili">
<img src="https://minotar.net/helm/AtomTR/128.png">
<div>AtomTR
<ul>
<li>asd</li>
</ul>
</div>
</div>
<div class="yetkili">
<img src="https://minotar.net/helm/RepublicanSensei/128.png">
<div>RepublicanSensei
<ul>
<li>asd</li>
</ul>
</div>
</div>
</div>
</div>
</div>




Answer

You can add vertical-align: top to the container:

.yetkili{
    display: inline-block;
    padding: 10px 25px;
    vertical-align: top;
}

DEMO