Black space between 2 of my divs. I dont know how to remove them. Have tried a couple of things

Question

This is a screenshot of it. I want the label and the image both to fit inside the blue div

I want both of them to fit inside the blue div. But nothing i did worked. I read i should have them float left/right but it stills have the blank space. Set the margin on 0. Still the blank space. The only thing that removed the blank space was line height on 0px. But this messed up the label placement. So i am kinda lost on this one

Html :

<div class="playerInfo">
<div class="playerChamp">
    <img src="profileIcon10.jpg" width="100" height="100" >
        <div class="playerName">
            <label for="male">Male</label>
        </div>
</div>
</div>

css

.playerInfo {
      height:120px;
      width:130px;
      background:blue;
        border:solid 1px black;
  }

  .playerChamp {
  width:100px;
  height:100px;
  background :red;
}

  .playerName {
  width:100px;
  height:20px;
  background :red;
}

Answer 1

add margin-top: -4px; to .playerName will pull it up and you won't have the space between the two divs .

SEE THE FIDDLE