保证金顶部似乎变得混乱

Question

我有一个div,其中包含图像和描述.当我更改margin-top时.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