容器の寸法に問題がある

Question

Link to CodePen。

私の目標は、4枚の画像を使って完璧な四角形を作成することです。私が使っている画像は250px x 250pxです。したがって、正方形の寸法は500px x 500pxにする必要があります。私がリンクしているペンを見ると、コンテナの寸法は500px x 506pxです。各画像の下にある余分な3ピクセルはどこから来ていますか？コンテナの寸法に余白や余白を追加しないでください。

HTML（ジェイド）

.work-container 
    a(href='/'): img.work-thumbnail(src='http://placehold.it/250x250') 
    a(href='/'): img.work-thumbnail(src='http://placehold.it/250x250') 
    a(href='/'): img.work-thumbnail(src='http://placehold.it/250x250') 
    a(href='/'): img.work-thumbnail(src='http://placehold.it/250x250') 

CSS（サス）

// ----- #WORK -----// 

//------------------// 

.work-container 
    width: 500px 
    background-color: lightgreen 
    display: flex 
    flex-wrap: wrap 

編集：私は、私は簡単に250ピクセルの高さを持っているアンカー要素を設定することができ知っているが、私は何を知りたいです画像あたり3個の余分な画像が表示されています。

Answer 1

これをあなたのSassに追加します。

.work-container img 
    display: block