Menu
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;
}
416
Set the css property position:relative for parent of the container. Show activity on this post. Show activity on this post. Define some width on your container and set margin top & bottom to some desired value and left & right values to auto so that it will always split the remaining space on the both sides equally.
On the Page Layout tab, in the Page Setup group, click Margins. Click the margin type that you want. For the most common margin width, click Normal. Note: When you click the margin type that you want, your entire document automatically changes to the margin type that you have selected.
Adjusting the Margin Size of an HTML Element With CSS You can remove this margin by setting the top and left margin to zero. Like the padding and border, the sizes of specific sides of the margin can be set using margin-left , margin-right , margin-top , and margin-bottom .
Solution: Always Use Top Margin! The reason is related to the 'C' in CSS.
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
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
