Почему вверху моей html-страницы есть граница

Я новичок в 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>

Спасибо за ваше время.

Тег h1 имеет маржу по умолчанию, добавленную браузерами по умолчанию. добавить маржу: 0 к элементу h1. это должно решить проблему. : D

— 17.12.2018 15:15

html css

17.12.2018 15:09

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

138

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Измените CSS h1 следующим образом:

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

Проблема заключается в таблице стилей пользовательского агента, которая автоматически назначает некоторый запас вашему h1.

Что вам нужно сделать в ваших файлах CSS, так это иметь шаблонный так называемый Сброс CSS в начале вашего файла CSS, чтобы убедиться, что ваш html выглядит одинаково во всех браузерах, а затем при необходимости стилизовать поля и т. д.

17.12.2018 15:15

У вашего h1 есть запас. Удалите его, установив margin: 0;.

17.12.2018 15:18

У ваших тегов <h> по умолчанию есть поля.

для решения

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

и я предлагаю вам изучить "сбросить css"

17.12.2018 15:19

Когда вы используете абсолютное или фиксированное положение, вы должны определить верхний атрибут. определите "верх" в ".menu-selector ul" следующим образом:

.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;
}

17.12.2018 15:20

Другие вопросы по теме

Пользовательские отступы для радиокнопок

Div с цветом фона внутри Div с предварительно определенной шириной

Как сделать текст слева или справа от колонки начальной загрузки

Невозможно отобразить содержимое div для события onmouseover в ожидаемой области в IE 11 только для строк таблицы

Изменение цвета изображения в скрипте ahk / html

Наследование CSS в Angular

Приоритет текста с многоточием

В Octobercms вставьте CSS из частичного

Переместить div наружу от веера карты в зависимости от его вращения?

Изменить размер шрифта для мобильных устройств с помощью JavaScript / JQuery

Почему вверху моей html-страницы есть граница

Ответы 4

Другие вопросы по теме

Похожие вопросы