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

i have <form> containing several <input /> fields. on of these fields have added calendar widget selecting date - working without 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 calendar icon next <input /> field. height of rows containing calendar icon increased few pixel:

how can prevent this? set width , height of <img> 20px , <img> isn't higher <input />.

unfortunately have change position of <img> otherwise starting few pixel above <input />.

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

the vertical-align rule determines how inline elements of different heights should positioned vertically on line. input , img elements have different vertical aligns default, why need set manually achieve desired effect.

using top:5px pushes image down 5px top, resulted space between lines. remove bit. using top center elements vertically bad idea anyway, may have images of different sizes , more prone getting disaligned again when more elements 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>