Question

对于HTML来说，我是一个新手，可以将其用于电子领域。我已经创建了初始屏幕，但是我无法弄清楚为什么屏幕顶部会出现一个栏，即标题和所选内容不在顶部。

    .menu-selector ul {
	    list-style-type: none;
	    margin: 0;
	    padding: 0;
	    width: 25%;
	    height: 100%;
	    background-color: #c4c4c4;
	    text-align:center;
	    position: fixed;
	    overflow: auto;
    }


    #myList a{
	     display: block;
	     color: #000;
	     padding-bottom: 0;
	     text-decoration: none;
	     padding-top: 20%;
	     padding-bottom: 20%;
    }

    #myList : last-child {
	    border-bottom: none;
    }


    #myList a:hover:not(.active) {
	    background-color: #555;
	    color: white;
    }

    #myList a.active {
	     background-color: #4CAF50;
	     color: white;
    }

    body {background-color: #828c9b;}

    .title {
	    width = 40%;
	    height = 40%;
	    padding-left: 38%;
	    background-color: #254982;
	    display: block;
	    border-color: #254982;
    }


    h1 {
	     text-align: center;
    }

<!DOCTYPE html>
	<html>
		<head>
			<link class="menu-bar" rel="stylesheet" href="../css/index.css">
			<link class="container" rel="stylesheet" href="../css/menu.css">
			<meta charset="utf-8">
			<title>Cipher Program</title>
				<style>
					body {margin: 0; padding-top: 0; border-top: 0}

				</style>
		</head>

		<body>
			<div class="menu-selector">
			<ul>
					<li id="myList"><a class="active" href="index.html"> Menu </a></li>
					<li id="myList"><a href="ceaser.html">Ceaser Cipher</a></li>
					<li id="myList"><a href="vernam.html">Vernam Cipher </a></li>
					<li id="myList"><a href="frequency.html">Frequency Analysis</a></li>
			</ul>
			</div>


			<!-- Page Content -->
			<div class="title">
				<h1> Welcome to Cipher Program </h1>

			</div>

			<div class="ceaser">
				<h2>Menu </h2>
				
			</div>
		</body>
	</html>

感谢您的宝贵时间。

Answer 1

如下更改h1 CSS：

h1 {
     text-align: center;
     margin-top: 0;
}

问题在于用户代理样式表会自动为您的h1分配一些边距。

在CSS文件中应该做的是在CSS文件的开头添加一个样板，即所谓的CSS Reset，以确保您的html在所有浏览器中看起来都一样，然后设置边距样式等。根据需要。

Answer 2

您的h1有一个空白。通过设置margin: 0;将其删除。

Answer 3

您的<h>标签的默认页边空白。

解决

h1,h2,h3,h4,h5,h6 {
  margin: 0;
}

我建议您调查“重置CSS”

Answer 4

使用绝对或固定位置时，必须定义top属性。请在“ .menu-selector ul”上定义“ top”：

.menu-selector ul {
    top: 0;


    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    height: 100%;
    background-color: #c4c4c4;
    text-align:center;
    position: fixed;
    overflow: auto;
}

为什么我的html页面顶部有边框

4 个答案: