Having trouble with container dimensions

Question

My goal is to create a perfect square using 4 images, 2 stacked on top of the others. The images I'm using are 250px x 250px. The dimensions of the square should therefore be 500px x 500px. If you view the pen I linked about you will see that the dimensions of the container are 500px x 506px. Where are those extra 3 pixels underneath each image coming from? There shouldn't be any padding or margin adding to the container's dimensions.

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: I know I could easily set the anchor elements to have a height of 250px, but I want to know what is causing those extra 3px per image to show up.

http://stackoverflow.com/q/32801095/3597276 – Michael Benjamin Apr 27 '16 at 04:18 — Michael Benjamin, Apr 27 '16 at 04:18

score 1 · Accepted Answer · answered Apr 27 '16 at 04:04

1

Add this to your Sass.

.work-container img
    display: block

answered Apr 27 '16 at 04:04

Layne

642
1
13
32

Welp, that has definitely solved it. So if an image defaults to `display: inline-block` , where are those extra pixels originating from? Still want to know the underlying theory there. – jakewies Apr 27 '16 at 04:07

Having trouble with container dimensions

1 Answers1