锚标签未填充高度和宽度

我试图在一个测试站点上创建图库部分,我制作了图库,但由于某种原因,a标签根本无法填充图像的高度和宽度,它们似乎都会塌陷到第一行图像的第一季度。

代码如下:(实际上,使用此代码,a标记获取高度和宽度,但图像堆叠在彼此的顶部)

HTML

<section class="portfolio">
<h1>&mdash; PORTFOLIO &mdash;</h1>
<div class="gallery">
  <a href="#">
    <img src="img/img1.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img2.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img3.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img4.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img5.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img6.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img7.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img8.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img9.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href=#"">
    <img src="img/img10.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img11.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img12.jpg" alt="">
  </a>
</div>
</section>

CSS

.portfolio {
  width: 90%;
  position: relative;
  left: 80px;
}

.portfolio h1 {
  text-align: center;
  margin-bottom: 50px;
  margin-top: 50px;
  font-size: 60px;
  font-family:'Poiret One', cursive;
}

.gallery img {
    margin: 5px;
    float: left;
    height: 230px;
    width: 330px;
    border: 1px solid #000;
    border-radius: 3px;
}

.gallery a {
  display: inline-block;
}

我可能做错了什么,但我无法解决!

提前谢谢。

https://jsfiddle.net/utaLy18j/1/