CSSでfloatを使用すると予期しない10pxのマージン

CSSでプロパティ "float"を使用する問題が発生しました。ページ上部に10ピクセルの余白があります。修正方法？ =「background1」動作しないidを持つ親のdivにCSSでfloatを使用すると予期しない10pxのマージン

PS.Adding空のdivがまた、私はこの記事https://css-tricks.com/all-about-floats/を読みますが

body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: sans-serif; 
 
} 
 
#background1 { 
 
    background: #F6F7FB; 
 
    width: 100%; 
 
    height: 527px; 
 
    padding:0; 
 
    position: relative; 
 
} 
 

 
/*Header menu*/ 
 

 
#background1 li { 
 
    list-style-type: none; 
 
    display:inline; 
 
} 
 
#background1 li a { 
 
    font-family: HalisGR-Medium; 
 
    font-size: 20px; 
 
    color: #3B3B3B; 
 
    text-decoration: none; 
 
    float: right; 
 
    margin-left: 52px; 
 
    margin-top: 24px; 
 
} 
 
#navmenu { 
 
    margin-right: 72px; 
 
} 
 
/*Header menu ends*/

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
    <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
    <!--Header menu--> 
 
    <div id="background1" style="clear: both"> 
 
     <div style="clear: both;"></div> 
 
      <section id="navmenu"> 
 
       <ul> 
 
        <li><a href="#">Projects</a></li> 
 
        <li><a href="#">Bio</a></li> 
 
        <li><a href="#">Contact</a></li> 
 
       </ul> 
 
      </section> 
 
    </div> 
 
    
 
</body> 
 
</html>

クリアフロートのためにこれらの技術を適用する方法を得ることはありません

出典

2017-03-10 Dima Kononenko

浮動小児のためではありません。 ulにmargin:0;を適用してください。 margin-topは、親の外で崩壊していることを示しています。

body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: sans-serif; 
 
} 
 
#background1 { 
 
    background: #F6F7FB; 
 
    width: 100%; 
 
    height: 527px; 
 
    padding:0; 
 
    position: relative; 
 
} 
 

 
/*Header menu*/ 
 

 
#background1 li { 
 
    list-style-type: none; 
 
    display:inline; 
 
} 
 
#background1 li a { 
 
    font-family: HalisGR-Medium; 
 
    font-size: 20px; 
 
    color: #3B3B3B; 
 
    text-decoration: none; 
 
    float: right; 
 
    margin-left: 52px; 
 
    margin-top: 24px; 
 
} 
 
#navmenu { 
 
    margin-right: 72px; 
 
} 
 
#navmenu ul { 
 
    margin: 0; 
 
} 
 
/*Header menu ends*/

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
    <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
    <!--Header menu--> 
 
    <div id="background1" style="clear: both"> 
 
     <div style="clear: both;"></div> 
 
      <section id="navmenu"> 
 
       <ul> 
 
        <li><a href="#">Projects</a></li> 
 
        <li><a href="#">Bio</a></li> 
 
        <li><a href="#">Contact</a></li> 
 
       </ul> 
 
      </section> 
 
    </div> 
 
    
 
</body> 
 
</html>

出典

2017-03-10 05:20:36

ありがとう!!私はそれを自分で理解できなかったので、とてもシンプルに見えます。しかし、なぜそのマージンがデフォルトでこの値を持つのですか？ –

@ディマノケンコ問題ありません。まともな外観のデフォルトスタイルを持つように要素をCSSで記述する必要はありません。 'ul'のようにデフォルトの左パディングがあるので、リストがインデントされます。 'p'と見出し（' h1'、 'h2'など）はデフォルトのマージンを持ち、' h1'、 'h2'などはフォントサイズが大きいので、HTMLだけを書いてページをレイアウトできます読み取り可能な、予期された形式。これは、CSSの作業をたくさん行う場合は、normalize.cssやリセットスタイルシートを調べて、これらのものがすべてあなたを驚かせることなくレイアウトに影響を与えないようにする必要があります。 –

CSSでfloatを使用すると予期しない10pxのマージン

答えて

関連する問題