Margin on input tags

by Lalji Tadhani

HTML

<div class="width-100">
  <div class="width-50">
    <input class="margin-10px padding-10px" value="This input should be filling in all the way to the right" />
  </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>

CSS

* {
  margin: 0px;
}

input {
  display: 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;
}