HTML5 DOCTYPEがパディングを台無しにするのはなぜですか？
ナビゲーションバー付きのhtml5ページがあります。完全にスクラッチコード化。最近、アイテムにDoctypeを追加しましたが、ナビゲーションバーの下に余分なスペースができました。 doctype宣言を削除すると、通常の状態に戻ります。すべてのパディングやマージンなどを完全にリセットし、問題を説明する少量のコードに削減しました。
このページは http://hackthetruth.org/webdesign/broken で見ることができます。
Doctypeの宣言がdivの高さを台無しにしている理由を誰かが知っていますか？
これは、inline-blockを使用する際の、興味深く微妙でありながら重要な考慮事項です。
簡単に言うと、ulのvertical-alignをbaseline以外に設定します。
これが機能する理由は、インラインブロックはテキストと見なされるため、line-heightやvertical-alignなどのテキストベースのプロパティの対象となるためです。
長い答えは次のとおりです。
CSS3仕様は、ボックスモデルがどのように機能するかについて（おそらく紛らわしい）深みを持っています。これはCSS3ボックス仕様からの引用で、この問題に関連する部分を強調しています。
9.5。 「インラインブロック」またはフローティング、置換されていない要素
...
heightの使用値は、使用値が「フロールートの「自動」高さ」で定義されている場合、「自動」でない限り、計算値です。
フロールートの自動高さを確認しましょう。
9.10。フロールートの「自動」高さ
場合によっては（前のセクションを参照）、要素の高さは次のように計算されます。
- インラインレベルの子しかない場合、高さは一番上のラインボックスの上部と一番下のラインボックスの下部の間の距離です。
.。
ラインボックスのパーツが重要です。これが効果的に意味するのは、インラインブロックとして表示するように設定されたものはすべて、プレーンテキストが使用する暗黙のボックスレイアウトの対象となるということです。
vertical-alignを設定するとこの問題が解決する理由を推測できるかもしれませんが、仕様を通じてこの問題の追跡を続けましょう。
line-box の定義は少しつまらないものであり、 セクション4.2 の例はほんのわずかしか役に立ちません。
CSS 2.1仕様に戻りましょう。これは、 行ボックスの説明 ではるかに優れた仕事をします。
線を形成するボックスを含む長方形の領域は、ラインボックスと呼ばれます... [その高さ]は、線の高さの計算のセクションに記載されている規則によって決定されます。
この説明から、line-heightプロパティとvertical-alignプロパティは、（ラインボックス、つまりインラインブロック要素の）高さの計算方法と関係があることがわかります。 line-heightの計算 を読むと、ほぼ明確になります。
... [ラインボックス]が「上」または「下」に配置されている場合、ラインボックスの高さが最小になるように配置する必要があります。
したがって、インラインブロック要素の高さは、暗黙のラインボックスの高さの計算の影響を受けます。この計算は、これらの垂直方向の配置の計算の対象になります。
したがって、ベースラインをインラインブロックの垂直方向の整列として使用しない場合、ボックスの暗黙のラインボックスは可能な限り最小のサイズに縮小するように見えます。
紛らわしい？ ...うん。短い答えに戻ってください:)
私は自分のサイトの1つで同じ問題を抱えていました。私はこの答えを見つけました ここ ：
"HTML5 doctypeを使用すると、画像はテキストが通常取得する行の高さ属性と思われるものを受け取るため、画像の下に「マージン」が表示されます。次のいずれかを表示するように設定できます。 blockまたはline-height：0ですが、後者を十分にテストしていないため、適切な修正であるかどうかを確認できません。 "
ナビゲーション画像を含むline-height:0に<div>を適用しました。それは私のためにトリックをしました。
これを試してください：
css：
html * { margin:0; padding:0; }
XHTML4 WebサイトをHTML5にアップグレードするときに、同じ問題が発生しました。私はこれらをたくさん持っていました：
<a><img></a>
その結果、画像の周りに魔法のような余分なパディングが追加されました。私にとって、解決策は単純でした-このcssを追加してください：
img { vertical-align: top; }
IE7の問題のためにdisplay: inline-blockを使用したことがないので、その癖に慣れていません。インライン要素に囲まれていないため、状況によってはul#pagetabに適用する必要はないようです。通常のブロック要素に変換するだけです。さらに、一部のインライン要素の横にフロートを必要としないフロート要素が含まれているため、ul#pagetabを介してdisplay: block; overflow: hidden;に実際の高さを指定します。
これにより、すべての問題（詳細には説明できません）が解決され、スタイル的に適切なスタイルが提供されるようです。
そのページに2つの漂遊</div>タグがあります。 32行目と34行目。削除して再試行します。それで問題が解決するかどうかを確認してください。