回答編集履歴
1
ボックスモデル
test
CHANGED
|
@@ -1,8 +1,50 @@
|
|
|
1
|
+
### background-image
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
1
5
|
> CSSのwidth: 1170px;もcontainerではなく大枠であるtop-wrapperで指定するものだと思っているのですがそれではなぜ間違いなのでしょうか？
|
|
2
6
|
|
|
3
7
|
|
|
4
8
|
|
|
5
|
-
`.top-wrapper` に `width: 1170px` を指定すれば、`background-image` の
|
|
9
|
+
`.top-wrapper` に `width: 1170px` を指定すれば、`background-image` の幅も 1170px に変化します。
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### ボックスモデル
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
> ```CSS
|
|
18
|
+
|
|
19
|
+
> .top-wrapper {
|
|
20
|
+
|
|
21
|
+
> padding: 180px 0 100px 0;
|
|
22
|
+
|
|
23
|
+
> background-image: url(https://prog-8.com/images/html/advanced/top.png);
|
|
24
|
+
|
|
25
|
+
> background-size: cover;
|
|
26
|
+
|
|
27
|
+
> color: white;
|
|
28
|
+
|
|
29
|
+
> }
|
|
30
|
+
|
|
31
|
+
> ```
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
width プロパティを指定しなかった場合の挙動は、**width: auto**です。
|
|
36
|
+
|
|
37
|
+
`.top-wrapper` には margin, border が指定されていない為、"margin edge", "border edge", "content edge" は等価です。
|
|
38
|
+
|
|
39
|
+
従って、「親要素の "padding edge"」と "content edge" が一致します。
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
- [width - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/width)
|
|
44
|
+
|
|
45
|
+
- [CSS 基本ボックスモデルの紹介 - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
|
|
46
|
+
|
|
47
|
+
- [CSS Box Model Module Level 3 （日本語訳）](https://triple-underscore.github.io/css-box-ja.html#box-model)
|
|
6
48
|
|
|
7
49
|
|
|
8
50
|
|