html - H3 は div を囲むよりも多くのスペースを取っています

Question

このようなウェブページがあります。

<html>
<head></head>
<body>
    <div style="background:blue">
        <h3 style="background:green">Hello world.</h3>
    </div>
</body>
</html>

クロムで出力を分析すると、h3 タグが div タグよりも多くのスペースを占めているようです。divタグにh3タグを完全に含めて、divの背景色を全体に表示させたいです。これを行う方法はありますか？

score 3 · Accepted Answer

これが発生する理由は、一部の要素にはデフォルトでブラウザースタイルが設定されているためです。そのため、常にcss resetを使用する必要があります。

div をフロートすると、要素がラップされ、h3 のマージンが 0 に設定されます。

<div style="background:blue;float:left;">
   <h3 style="background:green;margin:0;">Hello world.</h3>
</div>

div が画面全体のサイズを取得するには、フロートを削除します。

<div style="background:blue;">
 <h3 style="background:green;margin:0;">Hello world.</h3>
</div>

score 3 · Accepted Answer

このような

CSS

.div1{
    background-color:blue;
    float:left;
}
h3{
    margin:0;
    padding:0;
    background:green;

}

score 2 · Accepted Answer

CSSをリセットしましたか？これにより、すべてがデフォルト値に設定されました。

score 2 · Accepted Answer

font-sizeaなどline-heightを次のh3ように設定します。

h3 { 
  font-size: 16px;
  line-height: 1em; }

score 2 · Accepted Answer

<h3 style="background:green;margin:0;">Hello world.</h3>

デフォルトでは、h3 にはマージンが関連付けられています。したがって、h3 タグに margin:0 を追加する必要があります。

score 2 · Accepted Answer

overflow: hidden;私が見る最も簡単な解決策は、囲んでいる divに追加することです。

8 に答える 8