不能将元素从HTML文件中的其他元素移开吗？

Question

在本页的底部，http://kimcolemanprojects.com/cyanotype-hats.html有一个标题为“相关项目”的部分。

我不能把这个标题从上面的图像网格中移下来。我认为Html结构中一定有错误，但我找不到。我已经给了元素填充和空白，但它仍然不会移动。

这是该页面中html代码的一部分：

 <div class="container">
        <div id="header"> 
<h1><a href="index.html">KIM COLEMAN PROJECTS</a></h1>

<div id="nav">
<ul>
<li id="work">
<a href="index.html" class="current">Work</a>
</li>
<li id="about">
<a href="about.html">About</a></li></ul>
</div><!--end nav-->

        </div><!--end header-->



        <div class="main-individual">
           <!-- grid of Work -->

  <a rel="hats" href="images/hats/velour 2.jpg" class="fancybox" data-title-id="title-5">
             <div class="view view-sixth">
               <img src="images/hats/small-velour 2.jpg" />
                <div class="mask">
                <div class="mask-text">
                    <h2>Velour trilby with Cyanotype ribbon</h2>
                    <p></p>
                  </div>  
                </div>
            </div></a>

            <div id="title-5" class="hidden">
            Velour trilby with Cyanotype ribbon</div>

          <a rel="hats" href="images/hats/balaclava.jpg" class="fancybox" data-title-id="title-1">
             <div class="view view-sixth">
               <img src="images/hats/small-balaclava.jpg" />
                <div class="mask">
                <div class="mask-text">
                    <h2>Balaclava with Cyanotype ribbon</h2>
                    <p></p>
                  </div>  
                </div>
            </div></a>

            <div id="title-1" class="hidden">
               Balaclava with Cyanotype ribbon.
               </div>


        <span class="similar"><h6>Related Projects</h6></span>

            <a href="unique.html" >
            <div class="view-small view-sixth-small">
               <img src="images/related-project-images/uniques.jpg" />
                <div class="mask-small">
                <div class="mask-text">
                <h2>Unique</h2>
                    </div>
                </div>
            </div></a>


            <a target="blank" href="http://kimcolemanjennyhogarth.co.uk/glare.htm" >
            <div class="view-small view-sixth-small">
               <img src="images/related-project-images/glare.png" />
                <div class="mask-small">
                <div class="mask-text">
                <h2>Glare</h2>
                    </div>
                </div>
            </div></a>


        <a target="blank" href="http://kimcolemanjennyhogarth.co.uk/act_natural.htm" >
            <div class="view-small view-sixth-small">
               <img src="images/related-project-images/act-natural-glare.png" />
                <div class="mask-small">
                <div class="mask-text">
                <h2>Act Natural Glare</h2>
                    </div>
                </div>
            </div></a>

        </div>


    </div>

Answer 1

您可以减少.view-small类中的边距，例如margin: 20px 2%。你是这个意思吗？

更新:尝试在line-height: 30px;类中设置.similar。这将标题向下移动到小图像。