如何防止img标签增加它的父母的高度

时间：2015-08-05 12:26:04

标签： html css

我有一个<form>，其中包含多个<input />字段。在其中一些字段中，我添加了一个用于选择日期的日历窗口小部件 - 这样做没有任何问题。

＆＃13;
＆＃13; 
html {
  margin: 0px;
  padding: 0px;
}
.img {
  width: 20px;
  height: 20px;
  position: relative;
  top: 5px;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我的问题是<input />字段旁边的日历图标。包含日历图标的所有行的高度增加了几个像素：

enter image description here

我该怎样防止这种情况？我已将width的{​​{1}}和height设置为<img>，而20px并不高于<img>。< / p>

不幸的是，我必须更改<input />的位置，否则它会在<img>之上开始几个像素。

2 个答案:

答案 0 :(得分：2)

不要在图片上使用position:relative; top:5px;，而是在vertical-align:middle;和input上使用img。

vertical-align规则确定不同高度的inline elements应如何垂直放置在line上。默认情况下，input和img元素具有不同的vertical aligns，这就是您需要手动设置它以达到所需效果的原因。

使用top:5px将图像从顶部向下推5px，这会在您的线之间留出额外的空间。所以删掉那一点。使用top垂直居中的元素无论如何都是一个坏主意，因为你可能有大小略有不同的图像，并且当引入更多元素时，它更容易再次被取消。

演示：

＆＃13;
＆＃13; 
html {
  margin: 0px;
  padding: 0px;
}
img {
  width: 20px;
}
img, input{
  height: 20px;
  vertical-align: middle;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

如果您想要回答，请使用以下代码：

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

要在同一行中显示图标，请在两个元素上使用float:left，这样它们将在一行中并将<input />替换为<input class="inpt_cls"/>，因此特定的css将应用于输入类。< / p>

你会得到你想要的。希望它有所帮助或让我知道是否有任何问题。 TY

相关问题
最新问题