CSS - overflow: hidden not working on img
<p>I have an svg img I got from thenounproject.com (don't worry, I have a place on my site where I give credit to the creators of the images) which I have inside a div. I have set the CSS of the div to have <code>overflow: hidden;</code> however the img is stickout out of the bottom, changing the height of the containing div above the div the svg img is contained it. </p>

<p>Here is the photo of the end result so far (the blue overlay is the <code>&lt;img&gt;</code> object being viewed with firebug so you can see how it is sticking out beyond the white div containing it)</p>

<p><a href="https://i.stack.imgur.com/8wc74.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8wc74.png" alt="enter image description here"></a></p>

<p>the code I have is:</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="dropdown"&gt;
  &lt;div class="box edit"&gt;&lt;img src="../media/gear.svg"/&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.dropdown .box{
  width: 32px;
  height: 32px;
  padding: 5px 0px;
  margin: 0px 4px;
  display: inline-block;
  background-color: white;
  overflow: hidden;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
}
.box.edit{
  float: right;
  padding: 0px;
}
</code></pre>

<p><strong>I'm trying to get it so that the "blueish" overlay in the photo, which represents the svg img, does not extend beyond the white <code>box</code></strong></p>

<h2>UPDATE</h2>

<p>Thank you all for your answers. I though I would update this to narrow down my question now that I have gotten your feedback. I've tried removed <code>float: right;</code> and the other ideas (remove the <code>border: 0px solid transparent;</code>) but, while helpful, they did not solve the problem.</p>

<p>I currently have <code>transform: rotate(90deg);</code> applied to <code>.box.edit</code> so that way at least the overflow is inline with the rest of the <code>.dropdown</code> bar.</p>

<p>I've tried <code>max-height: 100%</code> and <code>width: 100%; height: auto;</code> etc. but that does not solve my problem. I do not need the entire svg in the box, only what you can see in the photo above (the gear). The part below that has copyright bit from thenounproject.com (see my above statement, I am still following their rules on using photos).</p>

<p>I don't know if I will need to edit the svg file or what, but I was trying to use <code>overflow: hidden;</code> to cut off the end bit (so it does not affect my spacing).</p>

<p>Thank you for your assistance so far.</p>