HTMLのセクション間のスペースは何ですか？

私は、このHTMLの構造を持っている：HTMLのセクション間のスペースは何ですか？

<body cz-shortcut-listen="true"> 
    <div id="panels"> 
     <section id="sect0" name="lvl0"> 
      <div id="divLvel0" class="level zero"> 
       <h2>top<nav><ul><li><a href="#sect1">Languages</a></li><li><a href="#sect2">Proficiency</a></li><li><a href="#sect3">Milestones</a></li><li><a href="#sect4">Details</a></li></ul></nav></h2> 
      </div> 
     </section> 
     <section id="sect1" name="lvl1"> 
      <div id="divLvel1" class="level one"> 
       <div id="panel_lvl1"> 
        <h2>Languages</h2> 
       </div> 
      </div> 
     </section> 
     <section id="sect2" name="lvl2"> 
     </section> 
     <section id="sect3" name="lvl3"> 
      <div id="divLvel3" class="level three"> 
       <div id="panel_lvl3"> 
        <h2>Milestones</h2> 
        <div id="chart3"> 
        </div> 
       </div> 
      </div> 
     </section> 
     <section id="sect4" name="lvl4"> 
      <div id="divLvel4" class="level four"> 
       <div id="panel_lvl4"> 
        <h2>Details</h2> 
        <div id="chart4"> 
        </div> 
       </div> 
      </div> 
     </section> 
    </div> 
</body>

https://jsfiddle.net/thadeuszlay/Lkdo5xv3/2/

すべてのセクションが互いに直接手を触れ、すなわちセクション間には、追加の要素がありません。しかし、どういうわけか、各セクション間のギャップ（緑の背景色）を見ることができます。

ボディのパディングと余白をゼロに設定しました。また、私はDIVでセクションを置き換えました。しかし、そのギャップはまだそこにある。

どのようにしてギャップをなくし、各セクションがギャップを置かずに他のセクションに触れるようにしますか？

出典

2016-10-17 thadeuszlay

は0 – Jhecht

親愛なる@thadeuszlayに緑色のコンテナのパディングを設定する：あなたが最もフィット見つけるの答えを受け入れる/ upvoteしてください。 –

リセットパディングとマージンは、各オブジェクト

出典

2016-10-17 21:50:28 Abood

これは、すべてのHTMLに設定され、0にリセットする必要があるデフォルトのパディングとマージンですか？ – thadeuszlay

それは間違いなく悪い習慣です。すべてのマージンとすべての要素のすべてのパディングを0にリセットすると、ブラウザのスタイルシートにあなたのためにたくさんのコードを書き直さなければなりません。ノーマライザーの使用についての私の答えを見てください。 –

私のコメントに間違いがありました。あなたの体に余裕があり、そのために要素の周りにスペースがあったのです。

同様のレンダリングエンジンを搭載したブラウザを使用していると仮定しているため、表示されないデフォルトスタイルがあることがあります。ここの場合のように、すべての要素のmargin-bottomを0に設定するか、単にすべての要素の余白とパディングをリセットし、必要に応じて追加します。あなたのスタイル

* { 
margin:0; 
padding:0; 
}

の開始時にすべてのオブジェクトの

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background: green; 
 
} 
 
.zero, 
 
.one, 
 
.two, 
 
.three, 
 
.four { 
 
    min-height: 100vh; 
 
    max-height: 1000px; 
 
    font-size: 20px; 
 
} 
 
section { 
 
    padding-top: 100px; 
 
} 
 
.zero, 
 
.sel:nth-child(1) { 
 
    background: red; 
 
} 
 
.one, 
 
.sel:nth-child(2) { 
 
    background: LightSeaGreen; 
 
} 
 
.two, 
 
.sel:nth-child(3) { 
 
    background: LightGreen; 
 
} 
 
.three, 
 
.sel:nth-child(4) { 
 
    background: HotPink; 
 
} 
 
.four, 
 
.sel:nth-child(5) { 
 
    background: LightSteelBlue; 
 
} 
 
#sect0, 
 
#sect1, 
 
#sect2, 
 
#sect3, 
 
#sect4 { 
 
    /* The image used */ 
 
    background: blue; 
 
}

<body cz-shortcut-listen="true"> 
 
    <div id="panels"> 
 
    <section id="sect0" name="lvl0"> 
 
     <div id="divLvel0" class="level zero"> 
 
     <h2>top<nav><ul><li><a href="#sect1">Languages</a></li><li><a href="#sect2">Proficiency</a></li><li><a href="#sect3">Milestones</a></li><li><a href="#sect4">Details</a></li></ul></nav></h2> 
 
     </div> 
 
    </section> 
 
    <section id="sect1" name="lvl1"> 
 
     <div id="divLvel1" class="level one"> 
 
     <div id="panel_lvl1"> 
 
      <h2>Languages</h2> 
 
     </div> 
 
     </div> 
 
    </section> 
 
    <section id="sect2" name="lvl2"> 
 
    </section> 
 
    <section id="sect3" name="lvl3"> 
 
     <div id="divLvel3" class="level three"> 
 
     <div id="panel_lvl3"> 
 
      <h2>Milestones</h2> 
 
      <div id="chart3"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </section> 
 
    <section id="sect4" name="lvl4"> 
 
     <div id="divLvel4" class="level four"> 
 
     <div id="panel_lvl4"> 
 
      <h2>Details</h2> 
 
      <div id="chart4"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </section> 
 
    </div> 
 
</body>

出典

2016-10-17 21:43:41 Jhecht

nope。ご覧のとおり、まだ緑色の背景が見えます。赤いセクションの下にあります。 – thadeuszlay

どのようなスタイルが問題を引き起こしているかを確認する最も簡単な方法は、要素を右クリックして 'inspect'をクリックすることです。 '計算済み'をクリックすると、ブラウザが使用している余白と埋め込みのすべての寸法が表示されます。 – Jhecht

...ええ、私は知っている。しかし、まだ私はギャップの原因を見つけることができません。 – thadeuszlay

-1

ために必要として、あなたは、パディングとマージンを設定することができ、その後

パディングと余白0を追加します。さらに、htmlを次のように変更します。

<section></section><!-- 
--><section></section>

または1行で：緑の背景はどこから来ている

<section></section><section></section>

出典

2016-10-17 21:55:05

申し訳ありませんWim、空白は要素が表示するように設定されている場合にのみ重要です：インラインブロック。ここではそうではありません。 –

はい、あなたはここにいます。私はその質問を誤解した。 –

これがあります。あなたが見ているのはbody要素です。あなたのレイアウトの中に何が残っているかを見るための「穴」があると想像してください。

私はあなたが常に調和し、あなたの要素のための合理的なデフォルト値を設定するためにCSS Normalizerを使用することをお勧めします。

h2 { margin: 0; padding: 0} 
body { margin: 0; }

をだけでなく、セクションのパディングを削除：あなたの例では

は、あなたが追加する必要があります。ここで働いてスニペットは次のとおりです。

body { 
 
    padding: 0; 
 
    margin: 0; 
 
    background: green; 
 
} 
 
ul li { 
 
    list-style-type: none; 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
} 
 
.zero, 
 
.one, 
 
.two, 
 
.three, 
 
.four { 
 
    padding: 40px 0; 
 
    font-size: 20px; 
 
} 
 
.outer-box { 
 
    background-color: blue; 
 
    padding-top: 100px; 
 
} 
 
.zero { 
 
    background: red; 
 
} 
 
.one { 
 
    background: LightSeaGreen; 
 
} 
 
.two { 
 
    background: LightGreen; 
 
} 
 
.three { 
 
    background: HotPink; 
 
} 
 
.four { 
 
    background: LightSteelBlue; 
 
} 
 
h2 { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<body cz-shortcut-listen="true"> 
 
    <div id="panels"> 
 
    <section id="sect0" name="lvl0"> 
 
     <div id="divLvel0" class="level zero"> 
 
     <h2>top<nav><ul><li><a href="#sect1">Languages</a></li><li><a href="#sect2">Proficiency</a></li><li><a href="#sect3">Milestones</a></li><li><a href="#sect4">Details</a></li></ul></nav></h2> 
 
     </div> 
 
    </section> 
 
    <section id="sect1" class="outer-box" name="lvl1"> 
 
     <div id="divLvel1" class="level one"> 
 
     <div id="panel_lvl1"> 
 
      <h2>Languages</h2> 
 
     </div> 
 
     </div> 
 
    </section> 
 
    <section id="sect3" class="outer-box" name="lvl3"> 
 
     <div id="divLvel3" class="level three"> 
 
     <div id="panel_lvl3"> 
 
      <h2>Milestones</h2> 
 
      <div id="chart3"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </section> 
 
    <section id="sect4" class="outer-box" name="lvl4"> 
 
     <div id="divLvel4" class="level four"> 
 
     <div id="panel_lvl4"> 
 
      <h2>Details</h2> 
 
      <div id="chart4"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </section> 
 
    </div> 
 
</body>

出典

2016-10-17 22:08:34

私はセクションの青い背景が見えるようにしたい。セクション内の隙間（青い背景）は残るべきです。セクション間のギャップ（緑色の背景）を除去する必要があります。私は家に帰るとあなたの解決策を見ていきます。 :) – thadeuszlay

マージン/パディングリセットの基本原理と何を使うべきかを理解することが重要だと思います。青色の空のボックスが必要な場合は、共通のクラスを持つ要素を作成し、 'background-color：blue'と' height：100px'（例えば）を与えます。必要な場所に要素を配置します。 –

うーん...。私はあなたが言ったことを考えます。しかし、私に教えてください。ギャップ（緑色のもの）は何ですか？私は決してそれを指定しなかった。 – thadeuszlay

HTMLのセクション間のスペースは何ですか？

答えて

関連する問題