HTML 5 섹션 요소 간의 기본 간격은?

내가 respsonsive 디자인으로 HTML5 페이지를 구축을 위해 노력하지만, 간격이 일부 요소 사이가 주목하고 있습니다 (: http://jsfiddle.net/LWQg2/ 여기 JSFiddle 참조) 다음 organge 헤더가 일부 요소 internationalization 및 mymenu 사이에 표시되는 방법을HTML 5 섹션 요소 간의 기본 간격은?

공지 사항, mainnav과 sitesearch 사이에서도 가능합니다. 나는이 공간을 없애는 방법을 모른다.

<!DOCTYPE html> 

<html class="no-js grid"> 


<head> 
<meta charset="utf-8"> 

<title>TT-Design</title> 

<link rel="stylesheet" href="css/global.css" media="all"> 
<link rel="stylesheet" href="css/layout.css" media="all and (min-width: 36.236em)"> 

<!-- These styles are for presentation only --> 
<link rel="stylesheet" href="css/presentation-global.css" media="all"> 
<link rel="stylesheet" href="css/presentation-layout.css" media="all and (min-width: 36.236em)">  


<meta http-equiv="cleartype" content="on"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 


    <link rel="stylesheet" type="text/css" href="/css/style.css?v=1" /> 

</head> 

<body> 
    <header> 
     <section id="social"> 
      FB+Social 
     </section> 
     <section id="internationalization"> 
      lang/curr 
     </section> 
     <section id="mymenu"> 
      <ul> 
       <li>login</li> 
       <li>myaccount</li> 
      </ul> 
     </section> 
     <img src="/images/logo.png" /> 
     <section id="bc_dialog"> 

     </section> 
     <nav id="mainnav"> 
      <ul> 
       <li>Home</li> 
       <li>Directory</li> 
       <li>Shop</li> 
      </ul> 
     </nav> 
     <section id="sitesearch"> 
      Searchbox 
     </section> 
    </header> 

    <div id="container"> 

     <header> 
      <h1>Pagetitle</h1> 
     </header> 

     <!-- page specific content --> 

     <aside id="facets"> 
      facet navigation 
     </aside> 
     <aside id="leftside"> 
      left side menu 
     </aside> 
     <div id="pagecontent"> 
      <p> 
       some regular content on the page. This is not a newsarticle page. 
      </p> 
     </div> 
     <aside id="rightside"> 
      related content 
     </aside> 


     <!-- end of page specific content --> 

    </div><!--! end of #container --> 

    <footer id="sitefooter"> 
     Advertise | Contact | About 
    </footer> 

    <section id="sitemap"> 
     sitemap links 
    </section> 

</body> 
</html> 



body { 
    margin:2px; 
} 

body header{ 
    background-color:orange; 
} 

#social{ 
    background-color:blue; 
} 

#internationalization{ 
    background-color:yellow; 
} 

#mymenu{ 
    background-color:grey; 
    padding:0px; 
} 

#bc_dialog{ 

} 

#mainnav{ 
    background-color:#FF00DC; 
} 

#sitesearch{ 
    background-color:#CDCDCD; 
} 

#container{ 
    background-color:#FFF; 
} 


#container header{ 
    background-color:#FFB7BF; 
} 

#container header h1{ 
    margin:0px; 
} 

#facets{ 
    background-color:purple; 
} 

#pagecontent{ 
    background-color:#FFD7AD; 
} 
#leftside{ 
    background-color:#FF0C00; 
} 
#rightside{ 
    background-color:#60FFEF; 
} 


#sitefooter{ 
    background-color:#BCE0FF; 
} 

#sitemap{ 
    background-color:#C5AAFF; 
}

출처

2014-02-08 Flo

이것은 마진이 ul이므로 발생합니다.

ul { margin:0; }으로 제거하거나 #mainnav, #mymenu { overflow: auto; }으로 신고하여 해결합니다.

출처

2014-02-08 17:22:40

간격은 기본 상단 및 하단 여백 ul 요소로 인해 발생합니다.

출처

2014-02-08 17:20:00

여백을 0으로 변경하면 남은 모든 항목이 떠있게 될 수도 있습니다.

margin:0; 
float:left;

브라우저에서 F12 키를 사용하여 이러한 문제를 식별 할 수 있습니다.

출처

2014-02-08 17:23:31 malta

HTML 5 섹션 요소 간의 기본 간격은?

답변

관련 문제