Input field width unaffected by margin

Question

I've got a really simple problem. Input element types are not affected by margin as expected. I'm guessing that input has some kind of default styling going on that is making it behave unexpectedly.

The expected result is that when I apply a margin of 5 pixels, the input field has a 5 pixel buffer completely surrounding it. What happens instead is that it has a 5 pixel buffer on the top, left, and bottom, but not the right.

* {
  margin: 0px;
}

input {
  display: inline-block;
  background-color: green;
  border: none;
}

div {
  background-color: yellow;
}

.width-100 {
  width: 100%;
  background-color: blue;
}

.width-50 {
  display: inline-block;
  width: 50%;
  background-color: red;
}

.margin-10px {
  margin: 10px;
}

.padding-10px {
  padding: 10px;
}

<div class="width-100">
  <div class="width-50">
    <input class="margin-10px" value="This input should be filling in all the way to the right"></input>
  </div>
  <!--
       -->
  <div class="width-50">
    <div class="margin-10px padding-10px">This div is filling in the space as expected.</div>
  </div>
  <!--
      -->
  <div class="width-50">
    <div class="margin-10px padding-10px">This div is filling in the space as expected.</div>
  </div>
  <!--
      -->
  <div class="width-50">
    <div class="margin-10px padding-10px">This div is filling in the space as expected.</div>
  </div>
</div>

Here is the link to my JSFiddle