Backgrounds4

質問

https://gyazo.com/8cb58eca78484337fe82dbb6e8a85162
ここから
・no-repeatは必要か。先に画像のpropertyがあれば理解できますけど
・background-origin: content-box;はどういうことでしょうか
・padding35とは

どなたか教えてください

回答No.2

Katsu_Kaiz · ベストアンサー

div {
border: 10px solid black;
padding: 35px;
background: url('img_flwr.gif');
background-repeat: no-repeat;
background-origin: content-box;
}

まず大前提として、<div></div>で囲まれた部分に対して背景画像を指定しています。

したがって、《background-origin: content-box;》というのは黒い枠線の部分、おっしゃるとおり長方形全体の領域のことです。

いっぽう、《padding: 35px;》というのも黒い枠線で囲まれた部分、つまり長方形全体の領域を指しています。申しわけありませんが、黄色の枠というのは間違いです。あくまでも、右端の黒い枠線から35pxです。そもそも<div></div>というのは、黒い枠線部分のことだからです。

これは「This is a Heading」という文章が短いために、paddingの仕組みを誤解されているのだと思います。

ためしに、「This is a Heading　あいうえおかきくけこさしすせそたちつてと……」みたいに、何か長めの文章を入れてみてください。

右端の黒い枠線からだいたい35pxくらいのところで、ちゃんと文章が改行されるかと思います。

参考URL：

http://www.htmq.com/style/padding.shtml

お礼

申し分ないです。ありがとうございました。

補足

＞これは「This is a Heading」という文章が短いために、paddingの仕組みを誤解されているのだと思います。
ためしに、「This is a Heading　あいうえおかきくけこさしすせそたちつてと……」みたいに、何か長めの文章を入れてみてください。

再質問して良かったです。質問しなければ、間違ったままでした。

回答No.1

Katsu_Kaiz

＞no-repeatは必要か。
　基本的には必要です。これを入れないと、背景画像が繰り返して表示されます。

＞background-origin: content-box;はどういうことでしょうか。
　これは別になくてもいいのではないでしょうか。

＞padding: 35px;とは
　画像にも赤い字で書いてありますが、<div>タグの内側を上下左右35pxずつ空けるという意味です。

参考URL：

http://www.htmq.com/css3/background-origin.shtml

補足

＞＞no-repeatは必要か。確認させてください
確認できました。

＞＞background-origin: content-box;はどういうことでしょうか。
この場合は長方形全体の領域のことですね。

＞＞padding: 35px;とは
divの領域は下記の画像URLの黄色で囲んだ枠で、右からのpaddingはdivの端から35ですね。
https://gyazo.com/53115431baa47f87ba004be24b05b5b0