html - 缩略图格使用数字标签还是div？

Question

我想要一个缩略图网格，我使用的只是divs（.thumb类），里面有一个img标记，但我读到一篇文章说，使用“new”图形标记更好（figcaption等）。我把div改成了figure并调整了css，但是我没有正确的反应，我想知道为什么？
对一组缩略图使用体形标记更好吗？
带有图的CSS，在它是一个.thumb类工作之前：

figure {
    background: #eeeeee;
    width: 25%;
    float: left;
    position: relative;
    margin-bottom: 20px;
    }

figure img {
    display: block;
    margin: 0;
    width: 100%;
}

figure img:hover {
    cursor: pointer;
    opacity: 0.5;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

带有图的HTML，以前是div.thumb类：

<div id="content">
    <figure><img src="img/thumbnail_test.jpg"></figure>
    <figure><img src="img/thumbnail_test.jpg"></figure>
    <figure><img src="img/thumbnail_test.jpg"></figure>
    <figure><img src="img/thumbnail_test.jpg"></figure>
    <figure><img src="img/thumbnail_test.jpg"></figure>
    <figure><img src="img/thumbnail_test.jpg"></figure>
    <figure><img src="img/thumbnail_test.jpg"></figure>
    <figure><img src="img/thumbnail_test.jpg"></figure>
</div>

Answer 1

这是因为默认情况下figure有margin（查看here了解更多信息），所以您必须重置margin，下面是一个片段

figure {
    background: #eeeeee;
    width: 25%;
    margin:0 0 20px 0;
    float:left
    
}
figure img {
    display: block;
    margin: 0;
    width: 100%;
}
figure img:hover {
    cursor: pointer;
    opacity: 0.5;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

<div id="content">
    <figure>
        <img src="http://placehold.it/100" />
    </figure>
    <figure>
        <img src="http://placehold.it/100" />
    </figure>
    <figure>
        <img src="http://placehold.it/100" />
    </figure>
    <figure>
        <img src="http://placehold.it/100" />
    </figure>
    <figure>
        <img src="http://placehold.it/100" />
    </figure>
    <figure>
        <img src="http://placehold.it/100" />
    </figure>
    <figure>
        <img src="http://placehold.it/100" />
    </figure>
    <figure>
        <img src="http://placehold.it/100" />
    </figure>
</div>