Eliminating vertical space between image rows

ionic-v1
1

Hello, please see the image below - I am trying to remove the thin vertical space between rows of images. I’ve tried making margin:0, padding:0 in main class, wrapper class, but to no avail. Can anyone help with the required css for this? I highlighted the problem area in red.

image
Screen Shot 2015-07-03 at 11.02.50 AM.png1206×787 406 KB

My CSS:

.wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    
    font-weight: normal;
    text-align: left;
    flex-wrap:wrap;
    
}

.wrapper > * {
    /*padding: 5px;*/
    /*flex: 1 100%; -- I commented this out - the wrapper was taking up full width in Chrome*/
}

.header {
    background: #DDDDDD;
    border-color: #CCCCCC;
     border-style: solid;
    border-width:1px;
}


.main {
    text-align: center;
    background: #EEEEEE;
    margin: 0px;
    padding: 0px;
    /*padding:2px;*/
}

My template:

<div class="wrapper">
   <span ng-repeat="monitor in monitors| limitTo: monLimit" ng-if="monitor.Monitor.Function!='None'">
      <header class="header">&nbsp;<i class="ion-monitor"></i>
         {{monitor.Monitor.Name}}&nbsp;
      </header>
      <article class="main">
         <img ng-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=single&monitor={{monitor.Monitor.Id}}&maxfps={{LoginData.maxFPS}}&scale=50&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{randomval}}" width="{{((devWidth)/(7-monitorSize[$index]))}}px;" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId)" on-hold="onHold($index)" on-release="onRelease($index)"/>
      </article>
   </span>  <!--ng repeat -->
</div>
2

Ahh solved. I just had to add display:block to the img-ngsrc

3

Thank you! I didn’t understand what was happening^^