1

In the "Meet the team" section of my page I have a list of floated images. For some reason there's a space below each of them. Why is that?

HTML:

<div class='team_grid_item'>
    <div class='team_grid_item_inner'>
        <div class='team_grid_item_image'>
            <img src='<?php bloginfo("template_url"); ?>/images/id.jpg' />
        </div>
    </div>
</div>
<div class='team_grid_item'>
    <div class='team_grid_item_inner'>
        <div class='team_grid_item_image'>
            <img src='<?php bloginfo("template_url"); ?>/images/id.jpg' />
        </div>
    </div>
</div>
...

CSS:

.team_grid_item {
    width: 20%;
    float: left;    
}
img, video, object {
    height: auto !important;
    max-width: 100% !important;
    width: auto;
}
drake035
  • 3,955
  • 41
  • 119
  • 229
  • The line break after `` counts as whitespace. if it happens to wrap to another line because your div is width-constrained... there ya go. – Marc B Oct 26 '15 at 19:36
  • @MarcB That's not true. It's because the images are inline-block and force a text flow. So you got a line of 'text' with just an image. The alignment of the image (baseline) causes the gap at the bottom. Add `{img {vertical-align: bottom;}` to fix. – GolezTrol Oct 26 '15 at 19:40
  • Try this `.team_grid_item_image { line-height: 0; }` – Nenad Vracar Oct 26 '15 at 19:52
  • Nenad : worked, thanks! Makes no sense at all, but works. – drake035 Oct 26 '15 at 20:45

0 Answers0