перемещать элемент с верхним краем вниз, оставляя рамку сверху на месте?

Question

У меня есть вертикальный заголовок с моим логотипом и навигацией, отделенный границей. Я бы хотел сохранить логотип и границу, где они находятся, перемещая элементы навигации на 25 пикселей. Как мне это достичь?

header { 
    background: none; 
    float: left; 
    margin-top: 123px; 
    margin-left: 22px; 
    position: fixed; 
    width: 158px; 
} 
header logo { 
    margin-top: ; 

} 
header nav { 
    border-top: 1px solid #202020; 
    margin-top: 25px; 
    width: 158px; 
} 
header nav ul li { 
    font-family: dalle; 
    padding-left: 55px; 
} 

<header> 
     <logo> 
      <a href="#"><img src="img/logo.png" alt="whskytngfxtrt logo" height="139" width="158" /></a></li> 
     </logo><!-- end logo --> 
     <nav> 
      <ul> 
       <li id="blog"><a href="#">BLOG</a></li> 
       <li id="work"><a href="#">WORK</a></li> 
       <li id="about"><a href="#">ABOUT</a></li> 
       <li id="contact"><a href="#">CONTACT</a></li> 
      </ul> 
     </nav><!-- end nav --> 
    </header><!-- end header --> 

Answer 1

Просто добавьте padding-top:25px в header nav:

header nav { 
    border-top: 1px solid #202020; 
    margin-top: 25px; 
    width: 158px; 
    padding-top:25px; 
} 

Answer 2

Добавить в CSS:

header nav ul { margin-top:25px }