여백 하단에 상단에 추가

위와 아래에 공백을 만들고 싶습니다. 따라서 div-margin과 margin-bottom을 사용했습니다. margin-bottom은 바닥에 공간을 추가하지 않습니다. 대신, 상단에 여백 - 하단을 추가하고, 아래 내용이 이에 위배됩니다.여백 하단에 상단에 추가

<body> 
    <div class="header"> 
     <img class="logo" src="Images/logo.png"/> 
     <ul class="navigation"> 
      <li class="Twitter"> 
       <a href="http://twitter.com/AccountLink"> 
        <img src="Images/twitter.png"/> 
       </a> 
      </li> 
     </ul> 
    </div> 
    <div class="banner"><img src="Images/banner.jpg"/></div> 
</body>

그리고 내 CSS :

는

이 문자 그대로 모든 내가 내 몸에 지금까지 가지고 코드

ul { 
    list-style-type: none; 
} 

.header { 
    width: 800px; 
    margin: 0px auto; 
    margin-top: 25px; 
    margin-bottom: 25px; 
} 

.header .logo { 
    padding-top: 10px; 
    float: left; 
} 

.header .navigation { 

    float: right; 
}

출처

2013-04-06 Andrew

요소 당신이 언급하는? 헤더에'margin-top'을 명시 적으로 설정하고 있기 때문에 거기에있는 것입니다. 나는 그 문제를 이해하지 못한다. –

무엇을 원하십니까? 머리글 하단에만 여백 추가? –

.header { 
    width: 800px; 
    margin: 25px auto; 
    overflow: hidden; 
} 

.banner { 
    display: inline-block; 
    margin: 25px auto; 
    width: 100%; 
}

호환성 테이블 : http://caniuse.com/#feat=inline-block

출처

2013-04-06 11:06:12 glocsw

당신은 부유 한 탐색, 아직 헤더 높이를 지정하지 않습니다. 네비게이션을 지우거나 오버플로를 적용하려면 몇 가지 요소를 사용하십시오 : 숨김; 헤더에. 예를 들어 : 브라우저

.header { 
    width: 800px; 
    margin: 25px auto; 
    overflow: hidden; 
}

출처

2013-04-06 10:30:23 Kaloyan

try using padding instead of margin 

    padding-top: 25px; 
    padding-bottom: 25px; 

also add 
.banner{ padding-top:10px;} 

or adjust to your needs

출처

2013-04-06 10:30:34

여백 하단에 상단에 추가

답변

관련 문제