2016-03-08 2 views
0

Я пытаюсь сделать мой заголовок (.navbar) исправленным, но когда я устанавливаю позицию на исправление, я получаю широкое пространство над заголовком, я исправил его, поместив margin (-22 0 0 0) но им мало путать с заданной маржой в отрицательномПолучение широкого пространства над заголовком

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style> 

html { 
    font-family: sans-serif; 
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
} 

body { 
    margin:0; 
    padding:0; 
} 

.navbar{ 
    height:86px; 
    width:100%; 
    background-color:#0083C1; 
    position:fixed; 
    margin:-22px 0 0 0; 
} 

#site-logo{ 
    height:70px; 
    width:200px; 
    background-color:#0083C1; 
    margin:2px 2px 0 1px; 
    float:left; 
} 

.navmenu{ 
    height:55px; 
    width:800px; 
    background-color:#0083C1; 
    margin:15px 0 0 500px; 
} 

.navmenu ul{ 
    float:left; 


} 

.navmenu ul li{ 
    list-style-type:none; 
    display:inline-block; 
    text-align:center; 

} 

.navmenu ul li a{ 
    text-decoration:none; 
    padding:15px; 
    color:#ffffff; 
    font-family: arial,sans-serif; 

} 

.navmenu ul li a:hover{ 
    border-bottom: 4px solid #ffffff; 
} 

.navmenu ul li a:focus{ 
    border-bottom: 4px solid #ffffff; 
} 
</style> 
    <title></title> 

</head> 
<body> 
    <header class="navbar"> 
      <div id="site-logo"> 

      </div> 
      <nav> 
      <div class="navmenu"> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Products</a></li> 
        <li><a href="#">Services</a></li> 
        <li><a href="#">Partners</a></li> 
        <li><a href="#">Clients</a></li> 
        <li><a href="#">Vision</a></li> 
        <li><a href="#">Careers</a></li> 
        <li><a href="#">Contact Us</a></li>     
       </ul> 
      </div> 
       </nav> 
     </header> 
    <h1>Hello</h1> 
    <h1>Hello</h1> 
    <h1>Hello</h1> 
    <h1>Hello</h1> 
    <h1>Hello</h1> 
    <h1>Hello</h1> 
    <h1>Hello</h1> 
    <h1>Hello</h1> 
    <h1>Hello</h1> 
    <h1>Hello</h1> 
    <h1>Hello</h1> 
    <h1>Hello</h1> 
    <h1>Hello</h1> 
    <h1>Hello</h1> 
    <h1>Hello</h1> 
    <h1>Hello</h1> 
    <h1>Hello</h1> 
    <h1>Hello</h1> 
    <h1>Hello</h1> 
    <h1>Hello</h1> 
</body> 
</html> 

ответ

1

Просто дайте следующие css. Он удалит пометку по умолчанию и маржу h1-тега, который использует браузер.

h1 { 
    margin: 0; 
    padding:0; 
} 

Элементы имеют по умолчанию маржу и отступы.

Вы также можете удалить все селектор.

* { 
    margin: 0; 
    padding: 0; 
} 

Working Fiddle

+0

я не использовал h1 в заголовке. –

+0

@SameerMoin Проверьте свой html. Существует '

Hello

' – ketan