みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

Backgrounds4

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

どなたか教えてください

投稿日時 - 2018-11-26 14:17:42

QNo.9561895

困ってます

質問者が選んだベストアンサー

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

投稿日時 - 2018-11-28 23:58:02

補足

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

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

投稿日時 - 2018-11-29 11:16:56

お礼

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

投稿日時 - 2018-11-29 11:17:37

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

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

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

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

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

投稿日時 - 2018-11-26 22:08:57

補足

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

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

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

投稿日時 - 2018-11-27 11:52:12

あなたにオススメの質問