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;
}

编辑：

边框有我忘记的默认边框大小，图像应显示为块

Answer 1

将display:block添加到您的img代码，将border:0添加到hr代码。

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

Answer 2

您看到的是<body>标记的默认边距。实际值取决于浏览器。

避免大多数浏览器不同默认值的常见做法是明确将margin和padding设置为0：

html, body {
    margin: 0;
    padding: 0;
}

为什么hr和img标签有余量？

2 个答案: