bootstrap img height：auto属性覆盖显式高度

Question

有一段时间我因为一次改变而避免在我的ruby项目中升级我的bootstrap-sass gem：

height: auto;

在img元素中。

此属性似乎覆盖显式高度属性。

所以我有一个宽度为1，高度为32的图像，我按原样使用它：

<img height="1" width="15" src="/assets/spc.png" alt="">

height: auto;似乎强制图像显示为15 x 480（32 x 15 = 480）。

我试图通过在HTML的HEAD中添加内嵌样式来重新定义img元素（例如img { }），但这似乎没有帮助。

我不确定适当的解决方案是什么。我在我的网站周围使用空白图像来创建其他元素之间的特定空间。我可能可以用其他类型的元素来做这个，比如div或span？

Answer 1

如何使用margin？

你可以举例如：

.spacerdiv{

height:1px;
width:15px;
}

在html中添加div并为其定义此类。 但这是非常糟糕的做法。向DOM添加冗余元素

甚至更好地定义margin

你可以面向对象并定义如下内容：

.margin_left_part_of_site{
margin: 5px 15px;
}

然后，您可以将此类添加到必须具有这些属性的每个元素。

一个jsfiddle例子可以提供进一步的帮助。

Answer 2

我想出的解决方案是使用div。我现在使用div，例如：

.login-spc {
  display: inline-block;
  height:40px;
  width:5px;
  vertical-align: middle;  
}