在 HTML 和 CSS 方面相当有能力，希望找到最合规的方式来响应式地完成此任务。我想使用position:relative 制作菜单和页脚。我不能使用position:absolute，因为我希望页脚根据内容始终位于页面底部，并且不会破坏 DOM 的流程。当我使用position:relative和宽度:100％时；我注意到我的菜单和页脚两侧都有空白。菜单顶部也有一个空白区域，而页脚底部也有一个空白区域。希望这里的一位专家能够帮助我。
谢谢:)
#mainMenu {
font-family:Arial, Times, sans-serif;
list-style-type:none;
padding-right:30px;
}
#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;
}
#mainMenu a:hover {
color:Teal;
}
#menu {
text-align:right;
width:inherit;
height:50px;
background-color:paleGoldenRod;
position:relative;
left:0;
top:0;
}
li {
display:inline;
}
th, td {
text-align:center;
border:1px dashed grey;
width:90px;
height:40px;
}
.formText {
margin:10px 0px;
}
footer {
background-color:SlateGray;
width:100%;
height:100px;
position:relative;
bottom:0;
left:0;
}<!DOCTYPE html>
<html>
<head>
<title>Contact Me</title>
<link href="C:\Users\dan\Desktop\Table Generator Website\style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<ul id="mainMenu">
<li><a href="C:\Users\dan\Desktop\Table Generator Website\index.html">HOME</a></li>
<li><a href="C:\Users\dan\Desktop\Table Generator Website\About\index.html">ABOUT</a></li>
<li><a href="C:\Users\dan\Desktop\Table Generator Website\Contact\index.html">CONTACT ME</a></li>
</ul>
</div>
<h2>Contact Me Directly</h2>
<form>
<label>Full Name:</label><br> <input type="text" name="name" class="formText"><br>
<label>Your Age:</label><br> <input type="text" name="age" list="ageList" class="formText"><br>
<datalist id="ageList">
<option value="18">
<option value="19">
<option value="20">
<option value="21">
<option value="22">
</datalist>
<label>E-Mail:</label><br> <input type="text" name="e-mail" class="formText"><br>
<label>Your Message</label><br><textarea rows="5" cols="50" class="formText"> </textarea><br>
<textarea></textarea><br><textarea></textarea>
<input type="submit" value="Submit">
</form>
<footer>
<p>This website was designed to learn how to code with proper syntax</p>
</footer>
</body>
</html>编辑:通过使用 margin:0 解决；问题是我的页脚和菜单采用文档正文的“默认”大小。
仍然存在的一个问题是，有没有办法可以将菜单放置在页面顶部？上面没有空格。
页脚也是如此，我需要它始终位于页面底部，无论每个页面的内容大小如何。
最佳答案
在大多数/所有浏览器中，body 上都有默认的margin。要删除它，请添加 body { margin: 0; }.
浏览器会向所有类型的元素添加默认样式，因此如果您刚刚制作了一个包含 h1、一些 p 和 ul 的 HTML 页面，页面的视觉格式将很好，无需任何额外的样式。当您设计自己的页面样式/设计时，您经常需要更改这些默认样式。
有些人使用 * {margin:0;padding:0;} 作为从浏览器中删除所有默认填充和边距的方法，如果您想在任何元素上添加边距/填充，您可以在需要的地方指定它。
还有样式表片段，如 reset.css和 normalize这将做到这一点，并设置一堆其他默认值，可以帮助你的 CSS 一致性和浏览器不一致的差异。您只需复制/粘贴该代码并将其作为网站 CSS 中的第一个 block 即可。
body {
margin: 0;
}
#mainMenu {
font-family: Arial, Times, sans-serif;
list-style-type: none;
padding-right: 30px;
}
#mainMenu a {
text-decoration: none;
margin: 5px;
padding: 2px;
color: SeaGreen;
font-weight: bold;
}
#mainMenu a:hover {
color: Teal;
}
#menu {
text-align: right;
width: inherit;
height: 50px;
background-color: paleGoldenRod;
position: relative;
left: 0;
top: 0;
}
li {
display: inline;
}
th,
td {
text-align: center;
border: 1px dashed grey;
width: 90px;
height: 40px;
}
.formText {
margin: 10px 0px;
}
footer {
background-color: SlateGray;
width: 100%;
height: 100px;
position: relative;
bottom: 0;
left: 0;
}<!DOCTYPE html>
<html>
<head>
<title>Contact Me</title>
<link href="C:\Users\dan\Desktop\Table Generator Website\style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<ul id="mainMenu">
<li><a href="C:\Users\dan\Desktop\Table Generator Website\index.html">HOME</a></li>
<li><a href="C:\Users\dan\Desktop\Table Generator Website\About\index.html">ABOUT</a></li>
<li><a href="C:\Users\dan\Desktop\Table Generator Website\Contact\index.html">CONTACT ME</a></li>
</ul>
</div>
<h2>Contact Me Directly</h2>
<form>
<label>Full Name:</label><br> <input type="text" name="name" class="formText"><br>
<label>Your Age:</label><br> <input type="text" name="age" list="ageList" class="formText"><br>
<datalist id="ageList">
<option value="18">
<option value="19">
<option value="20">
<option value="21">
<option value="22">
</datalist>
<label>E-Mail:</label><br> <input type="text" name="e-mail" class="formText"><br>
<label>Your Message</label><br><textarea rows="5" cols="50" class="formText"> </textarea><br>
<textarea></textarea><br><textarea></textarea>
<input type="submit" value="Submit">
</form>
<footer>
<p>This website was designed to learn how to code with proper syntax</p>
</footer>
</body>
</html>关于html - 为什么我的菜单和页脚有空格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43526916/