回答編集履歴

3

読みやすく修正。

2020/04/03 06:55

投稿

kei344
kei344

スコア69606

test CHANGED
@@ -80,6 +80,14 @@
80
80
 
81
81
 
82
82
 
83
+
84
+
85
+ **追記:**
86
+
87
+
88
+
89
+
90
+
83
91
  `width:100%;`にはデフォルトで`padding`幅が含まれないので、`box-sizing: border-box;`をつけるか、`width:100%;`を削除するかどちらかです。(`width:100%;`を削除すると親要素内に収まるように計算されるので)
84
92
 
85
93
 

2

ミスがあったため修正。

2020/04/03 06:55

投稿

kei344
kei344

スコア69606

test CHANGED
@@ -71,3 +71,35 @@
71
71
  }
72
72
 
73
73
  ```
74
+
75
+
76
+
77
+
78
+
79
+ ---
80
+
81
+
82
+
83
+ `width:100%;`にはデフォルトで`padding`幅が含まれないので、`box-sizing: border-box;`をつけるか、`width:100%;`を削除するかどちらかです。(`width:100%;`を削除すると親要素内に収まるように計算されるので)
84
+
85
+
86
+
87
+ ```CSS
88
+
89
+ header {
90
+
91
+ padding:10px;
92
+
93
+ margin-left:0px;
94
+
95
+ background: #fff;
96
+
97
+ border:medium solid #94de8c;
98
+
99
+ width:100%;/* これはそのままではpaddingを含まない */
100
+
101
+ box-sizing: border-box;/*こうするか、width:100%;を削除する */
102
+
103
+ }
104
+
105
+ ```**動くサンプル:**[https://jsfiddle.net/fL28mhbs/](https://jsfiddle.net/fL28mhbs/)

1

情報の追加。

2020/04/03 06:54

投稿

kei344
kei344

スコア69606

test CHANGED
@@ -40,7 +40,7 @@
40
40
 
41
41
  }
42
42
 
43
- ```
43
+ ```**動くサンプル:**[https://jsfiddle.net/8sjf15za/](https://jsfiddle.net/8sjf15za/)
44
44
 
45
45
 
46
46