html – Margin-top似乎变得混乱

概述我有一个div,其中包含图像和描述.当我更改.describing的margin-top时,容器div移动： HTML： <div class="project"> <a href="img/projects/a/a6.png" data-lightbox="a" data-title="A* algorithm realization"> <img class="proj 我有一个div,其中包含图像和描述.当我更改.describing的margin-top时,容器div移动：

HTML：

<div >    <a href="img/projects/a/a6.png" data-lightBox="a" data-title="A* algorithm realization">        <img  src="img/projects/a/acover.png" onmouSEOver="this.src='img/projects/a/a6.png'"  onmouSEOut="this.src='img/projects/a/acover.png'"/>    </a>    <a  href="img/projects/a/a1.png" data-lightBox="a" data-title="A* algorithm realization">    </a>    <a  href="img/projects/a/a2.png" data-lightBox="a" data-title="A* algorithm realization">    </a>                <a  href="img/projects/a/a3.png" data-lightBox="a" data-title="A* algorithm realization">    </a>    <a  href="img/projects/a/a4.png" data-lightBox="a" data-title="A* algorithm realization">    </a>    <a  href="img/projects/a/a5.png" data-lightBox="a" data-title="A* algorithm realization">    </a>    <p >        My realization of A* pathfinding algorithm.    </p></div><div >    <a href="img/projects/fl/fl1.png" data-lightBox="fl" data-title="Follow the light">        <img  src="img/projects/fl/flcover.jpg" onmouSEOver="this.src='img/projects/fl/fl1.png'" onmouSEOut="this.src='img/projects/fl/flcover.jpg'"/>    </a>    <a  href="img/projects/fl/fl2.png" data-lightBox="fl" data-title="Follow the light">    </a>    <a  href="img/projects/fl/fl3.png" data-lightBox="fl" data-title="Follow the light">    </a>    <p >        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;}

解决方法 答案非常简单,最好设置内联块元素(你的.project)

vertical-align: top ;

或任何其他财产价值https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
以防止由于内容流导致的错误对齐.

DEMO

总结

以上是内存溢出为你收集整理的html – Margin-top似乎变得混乱全部内容，希望文章能够帮你解决html – Margin-top似乎变得混乱所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。