Эскиз сетки использования фигурного тега или div?

Question

Я хочу сетку эскизов, и я использовал только divs (.thumb class) с внутри тега img, но я читал статью, в которой лучше использовать «новый» тег рисунка (figcaption и т. Д.). Я изменил свои divs на фигуры и скорректировал 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 с фигурой, перед был ДИВ .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>