How to prevent img tag increases the height of it's parent

Question

I have a <form> containing several <input /> fields. On some of these fields I have added a calendar widget for selecting a date - that is working without any problems.

html {
  margin: 0px;
  padding: 0px;
}
.img {
  width: 20px;
  height: 20px;
  position: relative;
  top: 5px;
}

<h1>Example #1 (table)</h1>
<table>
  <tr>
    <td>
      <input />
    </td>
  </tr>
  <tr>
    <td>
      <input />
    </td>
  </tr>
  <tr>
    <td>
      <input />
      <img class="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAADXElEQVR42rXUy4/bVBQG8NmwYVMkNghVQiBgAQukLvh3WIBAgOgOsWEBu4oVC1ggBAIEFFRAGihUVJ0yTdxOM5mkedhOMomdtx/X79iJU2eSr+fa08BkRuxq6VOUG+Wnc33OvVtbj+KRq3ffqZWE7ep+breyn9up8hz8f2oPU8zt1ku3/5AqhffWIMdso49kPkMcLzCLE0xnCSJKOE0woQRRAj/M4lHcSQKH4voT6KMuCL26BnllHAMSLKwDJKyIuVlArO9hqt1GNMojHN5C0P8HfvcmXPUGnM512J2/YbsOHC8AVXprDfJt8soWdgnWz8/DuvISfb4IdvlZsB/Og33/FMzvnoT5zTmYXz8O46vHoH+5Bf2zLRita2B+gvpB/uZ/K9zh20ysEuzfLsDPvYFAeBtB/q2NvJmFfvN3X4PxBaHNv2B69zdAern8nc3NfbCfnoO3/WoKO7++AueXl9NqnSsvwLr8DKwfz1OehvntEzCpQq1xFYZLYGkDDMMQi0hHJH2OvnAJfuVTWIVLGOU/Qlj5BL2d9+Htfwwz/wGGNy5iUvwQ3T9fR1+pwbAnp8GJ72BJbVlR5F6AmL5YwRHU8QT8kdoa4iOAeTGUAcvWGh10Ri4Mk50GA8/BgpDlcolGZ0Cjcx+W7aDbG2K1WkGWZcxmMzBTh9Jp0doScu0A7T6DblqnQZ/A5OgYPOwSOAezbKi9fgZKYgYaGpR2IwOrBRz2DGiGBXET9Fwb88Ux2FIykDGo3W76Z0mqEjglcAzlUE7XGgS2ugbG+hmg69igyTkG2wTGBJpQVSUD6/cwmxKojwgU12BD1THSGYHCSdAhkCYn216zSUdwDouDSidrQK2EmCq0jBHUw3q61qgVICsahtoGyA+5Y1uI4hWSJEkbEEURDL69ThOLRQKpWkQ4CWBofSitWrrGK5QV/WzQpTPJ50mWJYj1KjWhStssQ6wU026K5TvUhLuQKnsQ791JMbEs0JaNM8BSbtfzPLAgwUD3MDA89MY0MmPq8shKR6NNs8cb0KQ0KLwyjjWHIb1DPjbCv5dDrSxsa3QFOa5Ls2en42IyGwaz0hnj4aPBu8kbwCt6GI4N+urJ64u28G69LPzOryB+yNOUTkZcRzgRXhnH6uW9i4/k9n8AX5hil9Pvm0cAAAAASUVORK5CYII="
      />
    </td>
  </tr>
</table>

<h1>Example #2 (div)</h1>
<div>
  <input />
  <br/>
  <input />
  <br/>
  <input />
  <img class="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAADXElEQVR42rXUy4/bVBQG8NmwYVMkNghVQiBgAQukLvh3WIBAgOgOsWEBu4oVC1ggBAIEFFRAGihUVJ0yTdxOM5mkedhOMomdtx/X79iJU2eSr+fa08BkRuxq6VOUG+Wnc33OvVtbj+KRq3ffqZWE7ep+breyn9up8hz8f2oPU8zt1ku3/5AqhffWIMdso49kPkMcLzCLE0xnCSJKOE0woQRRAj/M4lHcSQKH4voT6KMuCL26BnllHAMSLKwDJKyIuVlArO9hqt1GNMojHN5C0P8HfvcmXPUGnM512J2/YbsOHC8AVXprDfJt8soWdgnWz8/DuvISfb4IdvlZsB/Og33/FMzvnoT5zTmYXz8O46vHoH+5Bf2zLRita2B+gvpB/uZ/K9zh20ysEuzfLsDPvYFAeBtB/q2NvJmFfvN3X4PxBaHNv2B69zdAern8nc3NfbCfnoO3/WoKO7++AueXl9NqnSsvwLr8DKwfz1OehvntEzCpQq1xFYZLYGkDDMMQi0hHJH2OvnAJfuVTWIVLGOU/Qlj5BL2d9+Htfwwz/wGGNy5iUvwQ3T9fR1+pwbAnp8GJ72BJbVlR5F6AmL5YwRHU8QT8kdoa4iOAeTGUAcvWGh10Ri4Mk50GA8/BgpDlcolGZ0Cjcx+W7aDbG2K1WkGWZcxmMzBTh9Jp0doScu0A7T6DblqnQZ/A5OgYPOwSOAezbKi9fgZKYgYaGpR2IwOrBRz2DGiGBXET9Fwb88Ux2FIykDGo3W76Z0mqEjglcAzlUE7XGgS2ugbG+hmg69igyTkG2wTGBJpQVSUD6/cwmxKojwgU12BD1THSGYHCSdAhkCYn216zSUdwDouDSidrQK2EmCq0jBHUw3q61qgVICsahtoGyA+5Y1uI4hWSJEkbEEURDL69ThOLRQKpWkQ4CWBofSitWrrGK5QV/WzQpTPJ50mWJYj1KjWhStssQ6wU026K5TvUhLuQKnsQ791JMbEs0JaNM8BSbtfzPLAgwUD3MDA89MY0MmPq8shKR6NNs8cb0KQ0KLwyjjWHIb1DPjbCv5dDrSxsa3QFOa5Ls2en42IyGwaz0hnj4aPBu8kbwCt6GI4N+urJ64u28G69LPzOryB+yNOUTkZcRzgRXhnH6uW9i4/k9n8AX5hil9Pvm0cAAAAASUVORK5CYII="
  />
</div>

My problem is a calendar icon next to the <input /> field. The height of all rows containing the calendar icon are increased by a few pixel:

How can I prevent this? I already set the width and height of the <img> to 20px and the <img> isn't higher than the <input />.

Unfortunately I have to change the position of the <img> otherwise it would be starting a few pixel above the <input />.

Answer 1

If you want answer then use this code :

 <style>
    html {
  margin: 0px;
  padding: 0px;
}
.img {
  float:left;
  margin-left:4px;
}
.inpt_cls {float:left;}
   </style>

To have icon in same line, use float:left on both element so they will be in one line and replace <input /> this to <input class="inpt_cls"/> so particular css will apply on input class.

and you will get what you want. Hope it help or let me know if there is any issue. Ty

Answer 2

Instead of using position:relative; top:5px; on your image, use vertical-align:middle; on both the input and the img.

The vertical-align rule determines how inline elements of different heights should be positioned vertically on a line. The input and img elements have different vertical aligns by default, which is why you need to set it manually to achieve your desired effect.

Using top:5px pushes the image down by 5px from the top, which resulted with extra space between your lines. So remove that bit. Using top to center elements vertically is a bad idea anyway, as you may have images that are of slightly different sizes and it is more prone to getting disaligned again when more elements are introduced.

Demo:

html {
  margin: 0px;
  padding: 0px;
}
img {
  width: 20px;
}
img, input{
  height: 20px;
  vertical-align: middle;
}

<h1>Example #1 (table)</h1>
<table>
  <tr>
    <td>
      <input />
    </td>
  </tr>
  <tr>
    <td>
      <input />
    </td>
  </tr>
  <tr>
    <td>
      <input />
      <img class="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAADXElEQVR42rXUy4/bVBQG8NmwYVMkNghVQiBgAQukLvh3WIBAgOgOsWEBu4oVC1ggBAIEFFRAGihUVJ0yTdxOM5mkedhOMomdtx/X79iJU2eSr+fa08BkRuxq6VOUG+Wnc33OvVtbj+KRq3ffqZWE7ep+breyn9up8hz8f2oPU8zt1ku3/5AqhffWIMdso49kPkMcLzCLE0xnCSJKOE0woQRRAj/M4lHcSQKH4voT6KMuCL26BnllHAMSLKwDJKyIuVlArO9hqt1GNMojHN5C0P8HfvcmXPUGnM512J2/YbsOHC8AVXprDfJt8soWdgnWz8/DuvISfb4IdvlZsB/Og33/FMzvnoT5zTmYXz8O46vHoH+5Bf2zLRita2B+gvpB/uZ/K9zh20ysEuzfLsDPvYFAeBtB/q2NvJmFfvN3X4PxBaHNv2B69zdAern8nc3NfbCfnoO3/WoKO7++AueXl9NqnSsvwLr8DKwfz1OehvntEzCpQq1xFYZLYGkDDMMQi0hHJH2OvnAJfuVTWIVLGOU/Qlj5BL2d9+Htfwwz/wGGNy5iUvwQ3T9fR1+pwbAnp8GJ72BJbVlR5F6AmL5YwRHU8QT8kdoa4iOAeTGUAcvWGh10Ri4Mk50GA8/BgpDlcolGZ0Cjcx+W7aDbG2K1WkGWZcxmMzBTh9Jp0doScu0A7T6DblqnQZ/A5OgYPOwSOAezbKi9fgZKYgYaGpR2IwOrBRz2DGiGBXET9Fwb88Ux2FIykDGo3W76Z0mqEjglcAzlUE7XGgS2ugbG+hmg69igyTkG2wTGBJpQVSUD6/cwmxKojwgU12BD1THSGYHCSdAhkCYn216zSUdwDouDSidrQK2EmCq0jBHUw3q61qgVICsahtoGyA+5Y1uI4hWSJEkbEEURDL69ThOLRQKpWkQ4CWBofSitWrrGK5QV/WzQpTPJ50mWJYj1KjWhStssQ6wU026K5TvUhLuQKnsQ791JMbEs0JaNM8BSbtfzPLAgwUD3MDA89MY0MmPq8shKR6NNs8cb0KQ0KLwyjjWHIb1DPjbCv5dDrSxsa3QFOa5Ls2en42IyGwaz0hnj4aPBu8kbwCt6GI4N+urJ64u28G69LPzOryB+yNOUTkZcRzgRXhnH6uW9i4/k9n8AX5hil9Pvm0cAAAAASUVORK5CYII="
      />
    </td>
  </tr>
</table>

<h1>Example #2 (div)</h1>
<div>
  <input />
  <br/>
  <input />
  <br/>
  <input />
  <img class="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAADXElEQVR42rXUy4/bVBQG8NmwYVMkNghVQiBgAQukLvh3WIBAgOgOsWEBu4oVC1ggBAIEFFRAGihUVJ0yTdxOM5mkedhOMomdtx/X79iJU2eSr+fa08BkRuxq6VOUG+Wnc33OvVtbj+KRq3ffqZWE7ep+breyn9up8hz8f2oPU8zt1ku3/5AqhffWIMdso49kPkMcLzCLE0xnCSJKOE0woQRRAj/M4lHcSQKH4voT6KMuCL26BnllHAMSLKwDJKyIuVlArO9hqt1GNMojHN5C0P8HfvcmXPUGnM512J2/YbsOHC8AVXprDfJt8soWdgnWz8/DuvISfb4IdvlZsB/Og33/FMzvnoT5zTmYXz8O46vHoH+5Bf2zLRita2B+gvpB/uZ/K9zh20ysEuzfLsDPvYFAeBtB/q2NvJmFfvN3X4PxBaHNv2B69zdAern8nc3NfbCfnoO3/WoKO7++AueXl9NqnSsvwLr8DKwfz1OehvntEzCpQq1xFYZLYGkDDMMQi0hHJH2OvnAJfuVTWIVLGOU/Qlj5BL2d9+Htfwwz/wGGNy5iUvwQ3T9fR1+pwbAnp8GJ72BJbVlR5F6AmL5YwRHU8QT8kdoa4iOAeTGUAcvWGh10Ri4Mk50GA8/BgpDlcolGZ0Cjcx+W7aDbG2K1WkGWZcxmMzBTh9Jp0doScu0A7T6DblqnQZ/A5OgYPOwSOAezbKi9fgZKYgYaGpR2IwOrBRz2DGiGBXET9Fwb88Ux2FIykDGo3W76Z0mqEjglcAzlUE7XGgS2ugbG+hmg69igyTkG2wTGBJpQVSUD6/cwmxKojwgU12BD1THSGYHCSdAhkCYn216zSUdwDouDSidrQK2EmCq0jBHUw3q61qgVICsahtoGyA+5Y1uI4hWSJEkbEEURDL69ThOLRQKpWkQ4CWBofSitWrrGK5QV/WzQpTPJ50mWJYj1KjWhStssQ6wU026K5TvUhLuQKnsQ791JMbEs0JaNM8BSbtfzPLAgwUD3MDA89MY0MmPq8shKR6NNs8cb0KQ0KLwyjjWHIb1DPjbCv5dDrSxsa3QFOa5Ls2en42IyGwaz0hnj4aPBu8kbwCt6GI4N+urJ64u28G69LPzOryB+yNOUTkZcRzgRXhnH6uW9i4/k9n8AX5hil9Pvm0cAAAAASUVORK5CYII="
  />
</div>