0

この 2 つのリンクを見てください。

http://jsfiddle.net/carloscala/N8q27/10/

HTML:

<!DOCTYPE html>
<body>
    <div id="container">
        <h1>Title</h1>
        <h2>Subtitle</h2>
    </div>    

    <div id="container2">
        <p>Hola</p>
    </div>
</body>

CSS:

h1
{
    background-color: green;

}
h2
{
    background-color: blue;

}
#container
{
    background-color: yellow;
    border: solid black 2px;
}
#container2
{
    background-color: orange;
    border: solid blue 2px;
}

レンダリング:

バージョン10のレンダリング結果

http://jsfiddle.net/carloscalla/N8q27/11/

HTML:

<!DOCTYPE html>
<body>
    <div id="container">
        <h1>Title</h1>
        <h2>Subtitle</h2>
    </div>    

    <div id="container2">
        <p>Hola</p>
    </div>
</body>

CSS:

h1
{
    background-color: green;

}
h2
{
    background-color: blue;

}
#container
{
    background-color: yellow;
}
#container2
{
    background-color: orange;
}

バージョン 11 のレンダリング結果

コンテナに境界線を適用すると、子のパディングがコンテナによって考慮されます。境界線を適用しない場合（またはパディングも機能する場合）、背景色を適用するとそうではありません。ドキュメント オブジェクト間の空白。

誰でもこれを説明できますか？コンテナにパディングやボーダーを適用せずに解決する方法はありますか?

4

2 に答える 2