Удалите небольшой зазор между нав и заголовком

Моего навигационного бара (, который находится в верхней части страницы) и заголовка (ниже нав, который имеет большое изображение и текст поверх него), имеет очень небольшой промежуток между ними, который я хочу удалить. Я посетил ряд сообщений о подобных проблемах и попробовал их решения, но, похоже, не работает для меня, в том числе: display: block; margin: 0; e.t.c.Удалите небольшой зазор между нав и заголовком

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

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    background-color: #f2f2f2; 
 
} 
 
html { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
#logo { 
 
    height: 50px; 
 
    width: auto; 
 
    float: left; 
 
} 
 
nav ul { 
 
    list-style-type: none; 
 
    overflow: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #1a1a1a; 
 
    text-align: center; 
 
    border: 1px solid #e7e7e7; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 
nav li { 
 
    display: inline-block; 
 
} 
 
nav a { 
 
    display: inline-block; 
 
    padding: 16px 15px; 
 
    text-decoration: none; 
 
    font-family: arial; 
 
    font-weight: bold; 
 
    color: white; 
 
} 
 
nav a:hover { 
 
    background-color: orange; 
 
    color: white; 
 
} 
 
nav { 
 
    margin-bottom: 0; 
 
} 
 
header { 
 
    margin-top: 0; 
 
    margin-bottom: 10px; 
 
    width: 100%; 
 
    font-family: arial; 
 
    font-size: 18px; 
 
    color: orange; 
 
} 
 
h1 { 
 
    position: absolute; 
 
    top: 150px; 
 
    width: 100%; 
 
    z-index: 1; 
 
    text-align: center; 
 
} 
 
#bannerImage { 
 
    width: 100%; 
 
    height: auto; 
 
    position: relative; 
 
    z-index: 0; 
 
}

<nav> 
 
    <ul> 
 
\t <img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"/> 
 
\t <li><a href="Game1.html" id="myBtn" onclick="disableLink()" >Game 1</a></li><li><a href="">Game 2</a></li><li><a href="">Game 3</a></li> 
 
    </ul> 
 
</nav> 
 
\t 
 
<header> 
 
    <img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png"/> 
 
    <h1>Games</h1> 
 
</header>

источник

2016-06-03 Sat10

удалить границу (который также положить белую линию весь путь вокруг навигационной панели), а также дисплей: встроенный блок для нав. Это избавляет от всего пробела вокруг навигационной панели. – justBecca

Также следует отметить, что если вы открываете файл в браузере, таком как хром, используйте элементы проверки, а затем вы можете включать и отключать стили, чтобы увидеть, что каждый стиль на самом деле делает на вашей странице. – justBecca

Проблема вызвана ваш ul имея overflow:hidden так просто удалить его.

Добавлен box-sizing:border-box избежать горизонтальной полосы прокрутки

UPDATE

Я заметил, что у вас есть img, как ребенок ul, что делает, что недействительный HTML.

Поэтому я настроил ваш код, чтобы он был действительным.

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box 
 
} 
 
body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #f2f2f2; 
 
} 
 
#logo { 
 
    height: 50px; 
 
    width: auto; 
 
    display: inline-block; 
 
    vertical-align:top 
 
} 
 
nav { 
 
    margin-bottom: 0; 
 
    background-color: #1a1a1a; 
 
    border: 1px solid #e7e7e7; 
 
} 
 
nav ul { 
 
    list-style-type: none; 
 
    width: calc(100% - 60px); 
 
    margin:0; 
 
    padding: 0; 
 
    text-align: center; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
nav li { 
 
    display: inline-block; 
 
} 
 
nav a { 
 
    display: inline-block; 
 
    padding: 16px 15px; 
 
    text-decoration: none; 
 
    font-family: arial; 
 
    font-weight: bold; 
 
    color: white; 
 
} 
 
nav a:hover { 
 
    background-color: orange; 
 
    color: white; 
 
} 
 
header { 
 
    margin-top: 0; 
 
    margin-bottom: 10px; 
 
    width: 100%; 
 
    font-family: arial; 
 
    font-size: 18px; 
 
    color: orange; 
 
} 
 
h1 { 
 
    position: absolute; 
 
    top: 150px; 
 
    width: 100%; 
 
    z-index: 1; 
 
    text-align: center; 
 
} 
 
#bannerImage { 
 
    width: 100%; 
 
    height: auto; 
 
    position: relative; 
 
    z-index: 0; 
 
}

<nav> 
 
    <img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif" /> 
 
    <ul> 
 
    <li><a href="Game1.html" id="myBtn" onclick="disableLink()">Game 1</a> 
 
    </li> 
 
    <li><a href="">Game 2</a> 
 
    </li> 
 
    <li><a href="">Game 3</a> 
 
    </li> 
 
    </ul> 
 
</nav> 
 

 
<header> 
 
    <img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png" /> 
 
    <h1>Games</h1> 
 
</header>

источник

2016-06-03 15:34:29 dippas

Спасибо dippas, оба подсказки отлично работали, я думал, что горизонтальная полоса прокрутки должна соответствовать ширине, которую я установил, или что-то в этом роде, поэтому я не спрашивал об этом. Что представляет собой * in '* {box-sizing: border-box}? – Sat10

Только что заметили, что у вас есть изображение как дочерний элемент 'ul', это недопустимый HTML. Я собираюсь обновить ответ – dippas

@ Sat10, если вы хотите, вы можете посмотреть обновленный ответ с допустимым HTML – dippas

Попробуйте установить высоту нав:

nav { 
    height: 50px; 
}

Попробованная это и работает даже без разницы, установлен равным 0.

источник

2016-06-03 15:34:33

Просто определить высоту nav

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    background-color: #f2f2f2; 
 
} 
 
html { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
#logo { 
 
    height: 50px; 
 
    width: auto; 
 
    float: left; 
 
} 
 
nav ul { 
 
    list-style-type: none; 
 
    overflow: hidden!important; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #1a1a1a; 
 
    text-align: center; 
 
    border: 1px solid #e7e7e7; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 
nav li { 
 
    display: inline-block; 
 
} 
 
nav a { 
 
    display: inline-block; 
 
    padding: 16px 15px; 
 
    text-decoration: none; 
 
    font-family: arial; 
 
    font-weight: bold; 
 
    color: white; 
 
} 
 
nav a:hover { 
 
    background-color: orange; 
 
    color: white; 
 
} 
 
nav { 
 
    margin-bottom: 0; 
 
    height: 51px; 
 
} 
 
header { 
 
    margin-top: 0; 
 
    margin-bottom: 10px; 
 
    width: 100%; 
 
    font-family: arial; 
 
    font-size: 18px; 
 
    color: orange; 
 
} 
 
h1 { 
 
    position: absolute; 
 
    top: 150px; 
 
    width: 100%; 
 
    z-index: 1; 
 
    text-align: center; 
 
} 
 
#bannerImage { 
 
    width: 100%; 
 
    height: auto; 
 
    position: relative; 
 
    z-index: 0; 
 
}

<nav> 
 
    <ul> 
 
\t <img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"/> 
 
\t <li><a href="Game1.html" id="myBtn" onclick="disableLink()" >Game 1</a></li><li><a href="">Game 2</a></li><li><a href="">Game 3</a></li> 
 
    </ul> 
 
</nav> 
 
\t 
 
<header> 
 
    <img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png"/> 
 
    <h1>Games</h1> 
 
</header>

источник

2016-06-03 15:35:12

Удалите небольшой зазор между нав и заголовком

ответ

Смежные вопросы