Lessons in Vertical Align and Inline Element Implicit Spacing

WOW never knew THAT. Also the implicit space between inline elements actually exists

by Marcus Baptiste

HTML

<div class="spaced">
  <input type="text" class="short-input">
  <input type="text" class="mid-input">
  <input type-"text" class="long-input" >
</div>

<div class="no-spaced"><input type="text" class="short-input"><input type="text" class="mid-input"><input type-"text" class="long-input" ></div>

CSS

div.spaced {
  background-color: black;  
}

div.no-spaced {
  background-color: #0a0;
}

input {
  background-color: white;
}
.short-input {
  height: 30px;
  vertical-align: middle;
}

.mid-input {
  height: 100px;
  vertical-align: middle;
}

.long-input {
  height: 200px;
  
}