保證金頂似乎要去haywire

Question

我有一個div，其中包含圖像和說明。當我改變的.describing邊距，容器DIV移動：

HTML：

<div class="project"> 
    <a href="img/projects/a/a6.png" data-lightbox="a" data-title="A* algorithm realization"> 
     <img class="projim" src="img/projects/a/acover.png" onmouseover="this.src='img/projects/a/a6.png'" onmouseout="this.src='img/projects/a/acover.png'"/> 
    </a> 
    <a class="hidden" href="img/projects/a/a1.png" data-lightbox="a" data-title="A* algorithm realization"> 
    </a> 
    <a class="hidden" href="img/projects/a/a2.png" data-lightbox="a" data-title="A* algorithm realization"> 
    </a>    
    <a class="hidden" href="img/projects/a/a3.png" data-lightbox="a" data-title="A* algorithm realization"> 
    </a> 
    <a class="hidden" href="img/projects/a/a4.png" data-lightbox="a" data-title="A* algorithm realization"> 
    </a> 
    <a class="hidden" href="img/projects/a/a5.png" data-lightbox="a" data-title="A* algorithm realization"> 
    </a> 
    <p class="describing"> 
     My realization of A* pathfinding algorithm. 
    </p> 
</div> 

<div class="project"> 
    <a href="img/projects/fl/fl1.png" data-lightbox="fl" data-title="Follow the light"> 
     <img class="projimfl" src="img/projects/fl/flcover.jpg" onmouseover="this.src='img/projects/fl/fl1.png'" onmouseout="this.src='img/projects/fl/flcover.jpg'"/> 
    </a> 
    <a class="hidden" href="img/projects/fl/fl2.png" data-lightbox="fl" data-title="Follow the light"> 
    </a> 
    <a class="hidden" href="img/projects/fl/fl3.png" data-lightbox="fl" data-title="Follow the light"> 
    </a> 
    <p class="describingfl"> 
     Very hard game with cute graphics. 
     Called "Follow the light". 
    </p> 
</div> 

CSS：

body{ 
    background-size: overlay; 
    background: rgb(72, 158, 136); 
} 


.project{ 
    margin:2% 1% 1% 3%; 
    padding-top: 1em; 
    background: #FFF; 
    width: 12em; 
    height: 19em; 
    display: inline-block; 

    box-shadow: 0 0 1em #272727; 
} 

.projim{ 
    display: table; 
    width: 8em; 
    height: 13em; 
    margin: auto; 

} 

.describing{ 
    color:#6a6a6a; 
    font-family: 'Roboto', sans-serif; 
    text-decoration: none; 
    font-size: 1em; 
    text-align: center; 

    border-top: 1px dashed #a39e9e; 
    margin-top: 1em; 
    padding-top: 1em; 
} 

.projimfl{ 
    display: table; 
    width: 8em; 
    height: 7em; 
    margin: auto; 

} 

.describingfl{ 
    color:#6a6a6a; 
    font-family: 'Roboto', sans-serif; 
    text-decoration: none; 
    font-size: 1em; 
    text-align: center; 

    border-top: 1px dashed #a39e9e; 
    margin-top: 6em; 
    padding-top: 1em; 
} 

.hidden{ 
    visibility: hidden; 
} 

Answer 1

答案很簡單，大淩河與inline-block元素（您的.project）最好設置爲

vertical-align: top ; 

或任何其他屬性值https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
爲了防止由於內容流誤對準。

DEMO