Probleme mit den Containerabmessungen haben

Question

Link to CodePen.

Mein Ziel ist es, ein perfektes Quadrat mit 4 Bildern zu erstellen, 2 übereinander gestapelt. Die Bilder, die ich benutze, sind 250px x 250px. Die Abmessungen des Quadrats sollten daher 500px x 500px betragen. Wenn Sie den Stift anzeigen, über den ich verlinkt habe, sehen Sie, dass die Abmessungen des Containers 500 x 506 Pixel sind. Wo sind die zusätzlichen 3 Pixel unter jedem Bild? Die Abmessungen des Containers dürfen nicht mit einem Füll- oder Randabstand versehen werden.

HTML (Jade)

.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 (Sass)

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

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

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

EDIT: Ich weiß, dass ich leicht die Ankerelemente setzen könnte eine Höhe von 250 Pixel haben, aber ich möchte wissen, was verursacht diese zusätzlichen 3px pro Bild zu zeigen.

Answer 1

Fügen Sie dies Ihrem Sass hinzu.

.work-container img 
    display: block