Phantom 'padding' после изображения

Question

Я создаю веб-сайт с использованием рамки responsive.gs.

Я только что добавил некоторые изображения в строке, содержащей divs на homepage.

По какой-то причине изображения показывают «отступы» внизу. Инструменты разработчика Chrome не показывают заполнения, но показывают, что содержащий div должен быть 230px x 239px, когда он должен быть 230px x 230px.

У меня возникло ощущение, что это связано с методом clearfix в responsive.gs CSS, потому что он добавляет элемент :after ко всем основным элементам макета. Однако я пытался, переходя к display:block, overflow:hidden, padding:0px, margin:0px и нет такой удачи в очистке «» отступы

/* SELF CLEARING FLOATS - CLEARFIX METHOD */ 
.container:after, 
.row:after, 
.col:after, 
.clr:after, 
.group:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

не Кто-нибудь сталкивался ничего подобного раньше?

Живой сайт здесь ... http://www.haydockoffice.co.uk/

CSS для коробки ...

.box { 
    background:#f0f; 
    padding:0px; 
    margin:0px; 
} 

CSS для гибкой системы сетки ...

http://www.haydockoffice.co.uk/assets/css/grid.css

HTML для ящиков ...

<div id="homepage" class="row"> 

    <div id="content" class="row gutters"> 

     <div class="box col s3"> 
      <img src="assets/images/products/product1.jpg" /> 
     </div> 

     <div class="box col s3"> 
      <img src="assets/images/products/product1.jpg" /> 
     </div> 

     <div class="box col s3"> 
      <img src="assets/images/products/product1.jpg" /> 
     </div> 

     <div class="box col s3"> 
      <img src="assets/images/products/product1.jpg" /> 
     </div> 

    </div> 

</div> 

Нежелательный эффект:

Answer 1

Набор line-height к 0

.box { 
    background:#f0f; 
    padding:0px; 
    margin:0px; 
    line-height:0; 
} 

Перед: http://jsfiddle.net/JfMFF/

После того, как: http://jsfiddle.net/JfMFF/1/

Answer 2

Я знаю, что вы сказали, что вы уже попробовали отображение: блок, но я только что отредактировал сайт с инспектором и применил отображение: блок к изображению удалил прокладку.

<div id="homepage" class="row"> 

<div id="content" class="row gutters"> 

    <div class="box col s3"> 
     <img style="display:block;" src="assets/images/products/product1.jpg" /> 
    </div> 

    <div class="box col s3"> 
     <img style="display:block;" src="assets/images/products/product1.jpg" /> 
    </div> 

    <div class="box col s3"> 
     <img style="display:block;" src="assets/images/products/product1.jpg" /> 
    </div> 

    <div class="box col s3"> 
     <img style="display:block;" src="assets/images/products/product1.jpg" /> 
    </div> 

</div> 

</div> 

Answer 3

Применить display: block к изображениям.