表格上的白色空间

Question

我是HTML / CSS的新手，在遇到这个问题时我一直在试验，而且我被卡住了。

HTML：

<div class = "window">
  <form>
    <input class="button" type="submit" value="Login" />
  </form>
</div>

CSS：

@font-face {
    font-family: caviarDreams;
    src: url(./CaviarDreams.ttf);
}
html *
{
    font-family:caviarDreams; 
    cursor:  url(./cursor.png), auto;
    background: url(./background.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
.button {
    border: none;
    text-indent:0;
    display:inline-block;
    line-height:39px;
    font-size: 15px; 
    background:url(./buttonNormal.png) no-repeat; 
    width:230px;
    height:71px;
}
.button:active { 
    background:url(./buttonActive.png) no-repeat; 
}
.button:hover { 
    background:url(./buttonHover.png) no-repeat;
}
.window {
    background: url('./window.png') no-repeat;
    background-size: 624px 696px;
    width:624px;
    height:696px;
}

以下是片段和小提琴演示here。很奇怪，在小提琴上没有问题。

html * {
  background: url(./background.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}
.button {
  border: none;
  text-indent: 0;
  display: inline-block;
  line-height: 39px;
  font-size: 15px;
  background: url(http://i.imgur.com/ZD9nn7F.png) no-repeat;
  width: 230px;
  height: 71px;
}
.button:active {
  background: url(http://i.imgur.com/K5mD1ga.png) no-repeat;
}
.button:hover {
  background: url(http://i.imgur.com/Yh2wITG.png) no-repeat;
}
.window {
  background: url('http://i.imgur.com/0ZQwEeS.png') no-repeat;
  background-size: 624px 696px;
  width: 624px;
  height: 696px;
}

<div class="window">
  <br/>
  <br/>
  <br/>
  <br/>
  <form>
    <input class="button" type="submit" value="Login" />
  </form>

</div>

看起来如何：

外观如何：

当我删除<form>时，“空格”消失。你能提出任何建议吗？

Answer 1

从html * {..}删除*并立即修复，我觉得很愚蠢