0

body要素の描画可能領域にマージンが含まれるのはなぜですか? 変更できますか？

以下に例を示します (お気に入りのエディターを使用することもできます)。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background: url('http://www.w3schools.com/css/paper.gif') no-repeat;
    border: 10px dashed red;
    padding: 50px;
    margin: 25px;
    background-repeat: no-repeat;
    background-origin: content-box;
}

h1 {
    background: url('http://www.w3schools.com/css/paper.gif') no-repeat;
    border: 10px dashed red;
    padding: 50px;
    background-attachment: scroll;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

2 つの要素を比較すると、要素の はマージン領域を埋めませんがbackground-image、要素の場合は埋めます。CSS 仕様でこれを見逃していた場合、参考文献を見つけるのを手伝ってもらえますか?h1body

background-origin: content-boxこの動作を変更するためにforを使用しようとしましbodyたが、うまくいきませんでした。

また、要素のbackground-repeatプロパティを削除すると、境界線にも拡張されますが、なぜこれが起こるのですか?h1background-image

4

2 に答える 2

0

CSS のマージンは、要素をレンダリングできない領域の量を設定します。これは、マージンを説明するものです。

この動作は、ボックス モデルで説明できます。

したがって、25px のマージンを設定すると、その要素に関連するものは何も描画できなくなります。

あなたが探しているコードは次のとおりだと思います（私は推測しています）：

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 25px;
}

#content { 
    background:url('http://www.w3schools.com/css/paper.gif');
    border: 10px dashed red;
    padding: 50px;
    background-repeat: no-repeat;
    background-origin: padding-box;
}

h1{
    background:url('http://www.w3schools.com/css/paper.gif') no-repeat;
    border: 10px dashed red;
    padding: 50px;
    background-attachment: scroll;
}
</style>
</head>

<body>
<div id="content">
<h1>Hello World!</h1>
</div>
</body>

</html>

これにより、CSS が body から分離され、background-origin を適用する機能が実際にはありません。

于 2013-06-14T08:04:30.460 に答える
0

ロシアの極秘の核ロケット地下室で解決策が見つかりました: css margin を HTML タグに設定する必要があります。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background: url('http://www.w3schools.com/css/paper.gif') no-repeat;
    border: 10px dashed red;
    padding: 50px;
    margin: 25px;
    background-repeat: no-repeat;
    background-origin: content-box;
}

h1 {
    background: url('http://www.w3schools.com/css/paper.gif') no-repeat;
    border: 10px dashed red;
    padding: 50px;
    background-attachment: scroll;
}
html{
    margin-top: 40px;
    margin-left: 20px;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>
于 2013-06-28T13:28:50.397 に答える