Question

我几乎已经完成了这个页面，但是在页脚的按钮图像下面，有一个令人讨厌的空间我无法摆脱。有什么帮助吗？

代码如下。

/*=========================>Jacob Dixon
/*=========================>MW 1230
/*=========================>4/16/2013
*/

header, footer, nav, section, article, aside {
        display: block;
}
p { text-align: center
}
h1 {text-align: center;  
color: #4876b9
}
p.subheader{text-align: center; 
text-shadow: black 0.02em 0.02em 0.02em;
width: 500px;
margin-left: 700px
}
body{
background-color: #b5c8e3;
height: 100%
}

table{
margin-bottom: 2500px;
width: 25%;
margin: auto;
margin-top: 100px;
height: 90%
}
td{
height: 70px;
padding: 10px;
overflow: hidden;
}
footer{
display:block;
margin:0 auto;
overflow: hidden;
clear:both;
}
/* -------------------------------------------------------*/

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>A List of All Our Artists</title>
          <meta charset="UTF-8"  />
  <link href="../styleSheets/allArtists.css"  rel="stylesheet"  type="text/css"  />
  <script>
    document.createElement("header");
    document.createElement("footer");
    document.createElement("nav");
    document.createElement("aside");
    document.createElement("section");
    document.createElement("article");
  </script>
  </head>
    <body>
    <h1>Meet Our Artists</h1>
    <hr/>
    <p class = "subheader">This Web page contains a complete list of all of our 
artists, arranged in alphabetical order; To obtain a detailed page of 
information for any given artist you can click on the artist's name; New 
artists join our family of artists from time to time, so you  should 
return to visit the site often.</p>


    <table border = "1">

    <tr><td rowspan = "1" colspan = ""><img src = "../images/johnsmall.jpg"></td><td rowspan = "1" colspan = "1"><a href = "artistDixon.html" target = "wat">John Egbert</a></td><td>Metal Working - Egypt</td></tr>

    <tr><td rowspan = "1" colspan = ""><img src = "../images/jakesmall.png"></td><td rowspan = "1" colspan = "1"><a href = "artistDixon.html" target = "wat">Jacob Dixon</a></td><td>Stone Carving - Egypt</td></tr>

    <tr><td rowspan = "1" colspan = ""><img src = "../images/jadesmall.png"></td><td rowspan = "1" colspan = "1"><a href = "artistDixon.html" target = "wat">Jade Harley</a></td><td>Woodworking - Egypt</td></tr>

    <tr><td rowspan = "1" colspan = ""><img src = "../images/davesmall.png"></td><td rowspan = "1" colspan = "1"><a href = "artistDixon.html" target = "wat">John Egbert</a></td><td>Fabrics - Egypt</td></tr>

</table>    
</body>

    <footer>
    <p><a href = "index.html"><img src = "../images/hmbtn.png" class = "button"></a></p>
    </footer>

</html>

我知道我错过了一些明显的东西，但我无法弄清楚是什么！

Answer 1

我怀疑间距是来自您将页脚图像包裹在其中的段落标记。

尝试将此添加到您的CSS：

footer p { padding:0; }

Answer 2

我不是百分之百确定你想要做什么，而是假设你希望页脚始终出现在屏幕底部。如果是这样，那么你应该看看粘性页脚选项，如显示here

页脚和页面底部之间的大空间

2 个答案: