Margin-top seems to be going haywire
css, html
Solution
The answer is quite simple, daling with `inline-block` elements (your `.project`) is preferable to set
vertical-align: top ;
or any other property value https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align in order to prevent mis-alignments due to content flow.
DEMO
Problem
I have a div, which contains an image and description. When I change margin-top of `.describing`, the container div moves: 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; } ```