html - ページの上部にあるこの奇妙な空白を特定するにはどうすればよいですか?

Question

ページの上部とロゴが配置されているヘッダーとの間に 60px の距離が必要です。ただし、すでに 16px の余白があるようです。このため、ヘッダーに 44px のマージントップを追加して、必要なものを実現しました。

しかし、そこから学ぶだけでなく、よりきれいにするために、16 ピクセルの空白がどこから来ているのかを特定したいと思います。余白を追加する代わりに、空白を拡張できれば理想的です。

ミステリースペースはマージンでもパディングでもないと思います...それが何であるかわかりません。

Answer 1

があります：

<br style="clear:both;"></br>

「コンテンツ」divのすぐ下の「ラッパー」div内。これは基本的に改行です。デフォルトのフォント サイズが 16px であるため、高さは 16px です。

そのようなことには、ブラウザーのページインスペクターを使用してください。これは、ページの構造と外観を調べるための便利なツールです。

Answer 2

あなたdiv.wrapperの の直前にdiv.headerがありますbr。それはあなたの 16px です！

<div class="wrapper">
    <div class="content">...</div>
    <br style="clear:both;">   <!-- mysterious 16px -->
    <div class="header">

Answer 3

HTML ファイルの68 行目で body タグのスタイルを次のように変更します。

body {
    line-height: 0;
    background: url("http://www.yoursite.com/wp-content/themes/modernist/style/../images/back_01.png") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    font-family: "RobotoRegular", Arial, sans-serif;
    color: #606060;
    margin: 0;
}