html - 为什么 hr 和 img 标签周围有空白？

Question

我正在尝试删除 hr 和 img 标签周围的空格，我还没有成功，这是一个 JSFiddle .

谁能告诉我怎么做？

在创建分离/环绕时使用 hrs 而不是 div 是个好主意吗？我应该改用 div 吗？谁能告诉我哪个是更好的选择。抱歉这个简短的问题。

一些代码:

<img class="banner margin_padding" src="http://goo.gl/ftvYk5">
<hr class="line margin_padding"/>
<hr class="line margin_padding"/>
<hr class="line margin_padding"/>

img.banner {
    height: 200px;
    width: 100%;
}
hr.line {
    background-color: red;
    color: red;
    height: 20px;
}
.margin_padding {
    margin: 0px;
    padding: 0px;
}

编辑:

边框有一个我忘记的默认边框大小，图像应该显示为 block

Answer 1

将 display:block 添加到您的 img 标签并将 border:0 添加到您的 hr 标签。

.margin_padding {
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
}