質問編集履歴

4

余計なコードが原因かと思い色々と削いだのですがこのコードでも余白ができてしまいます

2021/05/28 16:10

投稿

ssssbbbb0819
ssssbbbb0819

スコア3

test CHANGED
File without changes
test CHANGED
@@ -12,13 +12,15 @@
12
12
 
13
13
  </div>
14
14
 
15
+ ```
15
16
 
16
-
17
- ``````css
17
+ ```css
18
18
 
19
19
  *{
20
20
 
21
21
  box-sizing: border-box;
22
+
23
+
22
24
 
23
25
  }
24
26
 
@@ -66,6 +68,8 @@
66
68
 
67
69
 
68
70
 
71
+ ```
72
+
69
73
  ```### 前提・実現したいこと
70
74
 
71
75
 

3

2021/05/28 16:10

投稿

ssssbbbb0819
ssssbbbb0819

スコア3

test CHANGED
File without changes
test CHANGED
@@ -12,11 +12,9 @@
12
12
 
13
13
  </div>
14
14
 
15
- コード
15
+
16
16
 
17
17
  ``````css
18
-
19
- css
20
18
 
21
19
  *{
22
20
 
@@ -68,8 +66,6 @@
68
66
 
69
67
 
70
68
 
71
- コード
72
-
73
69
  ```### 前提・実現したいこと
74
70
 
75
71
 

2

2021/05/28 16:07

投稿

ssssbbbb0819
ssssbbbb0819

スコア3

test CHANGED
File without changes
test CHANGED
@@ -1,30 +1,20 @@
1
- ```ここに言語を入力
1
+ ```html
2
+
3
+ <div class="f-inner">
4
+
5
+   <div class="f-left">
6
+
7
+ </div>
8
+
9
+ <div class="f-right">
10
+
11
+ </div>
12
+
13
+ </div>
2
14
 
3
15
  コード
4
16
 
5
- ```### 前提・実現したいこと
17
+ ``````css
6
-
7
-
8
-
9
- display:flexで要素を横並びにしたいのですが左に隙間ができてしまいます。
10
-
11
-
12
-
13
- ### 発生している問題・エラーメッセージ
14
-
15
- bodyのwidthを1500pxにし、width100%のdivを設置。
16
-
17
- divにdisplay:flexで横並びに。
18
-
19
- その際に左端に隙間ができます。
20
-
21
- marginやpaddingは設定していないのにできてしまいます。
22
-
23
-
24
-
25
- ### 該当のソースコード
26
-
27
-
28
18
 
29
19
  css
30
20
 
@@ -78,23 +68,31 @@
78
68
 
79
69
 
80
70
 
71
+ コード
72
+
73
+ ```### 前提・実現したいこと
81
74
 
82
75
 
83
76
 
77
+ display:flexで要素を横並びにしたいのですが左に隙間ができてしまいます。
84
78
 
85
- html
86
79
 
87
- <div class="f-inner">
88
80
 
89
-   <div class="f-left">
81
+ ### 発生している問題・エラーメッセージ
90
82
 
91
- </div>
83
+ bodyのwidthを1500pxにし、width100%のdivを設置。
92
84
 
93
- <div class="f-right">
85
+ divにdisplay:flexで横並びに。
94
86
 
95
- </div>
87
+ その際に左端に隙間ができます。
96
88
 
89
+ marginやpaddingは設定していないのにできてしまいます。
90
+
91
+
92
+
97
- </div>
93
+ ### 該当のソースコード
94
+
95
+
98
96
 
99
97
 
100
98
 

1

codeを追記いたしました。インスペクタで確認したところmarginやpaddingでなく要素の一部として空白が存在しているような状態です。

2021/05/28 16:07

投稿

ssssbbbb0819
ssssbbbb0819

スコア3

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,8 @@
1
+ ```ここに言語を入力
2
+
3
+ コード
4
+
1
- ### 前提・実現したいこと
5
+ ```### 前提・実現したいこと
2
6
 
3
7
 
4
8
 
@@ -24,25 +28,73 @@
24
28
 
25
29
  css
26
30
 
27
- .inner {
31
+ *{
28
32
 
29
- display: flex;
33
+ box-sizing: border-box;
30
34
 
35
+ }
36
+
37
+ body{
38
+
39
+ width: 500px;
40
+
41
+ margin: 0;
42
+
43
+ padding: 0%;
44
+
45
+ }
46
+
47
+ .f-inner{
48
+
49
+ display: flex;
50
+
31
- width: 100%;
51
+ width: 100%;
52
+
53
+ justify-content: baseline;
54
+
55
+ }
56
+
57
+ .f-left{
58
+
59
+ width: 40%;
60
+
61
+ background-color: rgb(212, 208, 203);
62
+
63
+
64
+
65
+ height: 100px;
66
+
67
+ }
68
+
69
+ .f-right{
70
+
71
+ width: 60%;
72
+
73
+ background-color: rgb(78, 74, 57);
74
+
75
+ height: 100px;
32
76
 
33
77
  }
34
78
 
35
79
 
36
80
 
81
+
82
+
83
+
84
+
37
85
  html
38
86
 
39
- <div class="inner">
87
+ <div class="f-inner">
40
88
 
41
-   <div class="left"></div>
89
+   <div class="f-left">
42
90
 
43
- <div class="right"></div>
91
+ </div>
44
92
 
93
+ <div class="f-right">
94
+
45
- </div>
95
+ </div>
96
+
97
+ </div>
46
98
 
47
99
 
48
100
 
@@ -54,6 +106,8 @@
54
106
 
55
107
 
56
108
 
109
+
110
+
57
111
  ### 補足情報(FW/ツールのバージョンなど)
58
112
 
59
113