Question

我有以下HTML5代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
  max-width: 960px;
  margin: 0 auto;
  font-size: 120%;
}
header, nav {
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
header {
  border-color: red;
}
img.mainpicture {
  width: 100%;
  height: auto;
}
</style>
</head>
<body>
<header>
<img class="mainpicture" src="http://s29.postimg.org/ajjbb0n07/apic.jpg" alt="A picture"/></header><nav>Navigation area.</nav>
</body>
</html>

有人可以解释为什么<header>和<nav>内容之间有大约5个像素的空白区域，我该如何删除它？

添加

header {
  padding-bottom: 1px;
}

到CSS文件，白色空间的高度扩展了一个像素，所以它似乎与<header>的填充没有任何关系。

编辑：我想在不使用<nav style="position: relative; top:-7px;">的情况下这样做。

Answer 1

在图像上设置显示块以修复配件问题。

| line handle |
line := (LineMorph from: 100@100 to: 100@100 color: Color red width: 2) openInWorld.
handle := HandleMorph new forEachPointDo:
    [:newPoint | line setVertices: {100@100. newPoint}].
self currentHand attachMorph: handle.

body {
  max-width: 960px;
  margin: 0 auto;
  font-size: 120%;
}
header,
nav {
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
img.mainpicture {
  width: 100%;
  display: block;
}

Answer 2

可能是因为内部元素有一个margin，它突出到外面！此外，由于您有<img />，因此请为其display: block;。对overflow: hidden;，header：

进行nav尝试

header, nav {
  overflow: hidden;
}

header img {
  display: block;
}

Answer 3

添加

img.mainpicture{
.....................
.....................
vertical-align: top;
}

这将解决问题：）

Answer 4

将属性margin-bottom设置为零。

margin-bottom: 0;

<header>和<nav>之间的不需要的空间

4 个答案: