質問編集履歴
4
余計なコードが原因かと思い色々と削いだのですがこのコードでも余白ができてしまいます
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,10 +5,11 @@
|
|
|
5
5
|
<div class="f-right">
|
|
6
6
|
</div>
|
|
7
7
|
</div>
|
|
8
|
-
|
|
8
|
+
```
|
|
9
|
-
```
|
|
9
|
+
```css
|
|
10
10
|
*{
|
|
11
11
|
box-sizing: border-box;
|
|
12
|
+
|
|
12
13
|
}
|
|
13
14
|
body{
|
|
14
15
|
width: 500px;
|
|
@@ -32,6 +33,7 @@
|
|
|
32
33
|
height: 100px;
|
|
33
34
|
}
|
|
34
35
|
|
|
36
|
+
```
|
|
35
37
|
```### 前提・実現したいこと
|
|
36
38
|
|
|
37
39
|
display:flexで要素を横並びにしたいのですが左に隙間ができてしまいます。
|
3
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,9 +5,8 @@
|
|
|
5
5
|
<div class="f-right">
|
|
6
6
|
</div>
|
|
7
7
|
</div>
|
|
8
|
-
|
|
8
|
+
|
|
9
9
|
``````css
|
|
10
|
-
css
|
|
11
10
|
*{
|
|
12
11
|
box-sizing: border-box;
|
|
13
12
|
}
|
|
@@ -33,7 +32,6 @@
|
|
|
33
32
|
height: 100px;
|
|
34
33
|
}
|
|
35
34
|
|
|
36
|
-
コード
|
|
37
35
|
```### 前提・実現したいこと
|
|
38
36
|
|
|
39
37
|
display:flexで要素を横並びにしたいのですが左に隙間ができてしまいます。
|
2
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,17 +1,12 @@
|
|
|
1
|
-
```
|
|
1
|
+
```html
|
|
2
|
+
<div class="f-inner">
|
|
3
|
+
<div class="f-left">
|
|
4
|
+
</div>
|
|
5
|
+
<div class="f-right">
|
|
6
|
+
</div>
|
|
7
|
+
</div>
|
|
2
8
|
コード
|
|
3
|
-
```
|
|
9
|
+
``````css
|
|
4
|
-
|
|
5
|
-
display:flexで要素を横並びにしたいのですが左に隙間ができてしまいます。
|
|
6
|
-
|
|
7
|
-
### 発生している問題・エラーメッセージ
|
|
8
|
-
bodyのwidthを1500pxにし、width100%のdivを設置。
|
|
9
|
-
divにdisplay：flexで横並びに。
|
|
10
|
-
その際に左端に隙間ができます。
|
|
11
|
-
marginやpaddingは設定していないのにできてしまいます。
|
|
12
|
-
|
|
13
|
-
### 該当のソースコード
|
|
14
|
-
|
|
15
10
|
css
|
|
16
11
|
*{
|
|
17
12
|
box-sizing: border-box;
|
|
@@ -38,16 +33,20 @@
|
|
|
38
33
|
height: 100px;
|
|
39
34
|
}
|
|
40
35
|
|
|
36
|
+
コード
|
|
37
|
+
```### 前提・実現したいこと
|
|
41
38
|
|
|
39
|
+
display:flexで要素を横並びにしたいのですが左に隙間ができてしまいます。
|
|
42
40
|
|
|
43
|
-
html
|
|
44
|
-
<div class="f-inner">
|
|
45
|
-
<div class="f-left">
|
|
46
|
-
|
|
41
|
+
### 発生している問題・エラーメッセージ
|
|
47
|
-
|
|
42
|
+
bodyのwidthを1500pxにし、width100%のdivを設置。
|
|
43
|
+
divにdisplay：flexで横並びに。
|
|
48
|
-
|
|
44
|
+
その際に左端に隙間ができます。
|
|
49
|
-
|
|
45
|
+
marginやpaddingは設定していないのにできてしまいます。
|
|
50
46
|
|
|
47
|
+
### 該当のソースコード
|
|
48
|
+
|
|
49
|
+
|
|
51
50
|
### 試したこと
|
|
52
51
|
|
|
53
52
|
検証ツールでjustify-contentを全部試したのですが余白が消えません。
|
1
codeを追記いたしました。インスペクタで確認したところmarginやpaddingでなく要素の一部として空白が存在しているような状態です。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
```ここに言語を入力
|
|
2
|
+
コード
|
|
1
|
-
### 前提・実現したいこと
|
|
3
|
+
```### 前提・実現したいこと
|
|
2
4
|
|
|
3
5
|
display:flexで要素を横並びにしたいのですが左に隙間ができてしまいます。
|
|
4
6
|
|
|
@@ -11,21 +13,46 @@
|
|
|
11
13
|
### 該当のソースコード
|
|
12
14
|
|
|
13
15
|
css
|
|
14
|
-
|
|
16
|
+
*{
|
|
15
|
-
|
|
17
|
+
box-sizing: border-box;
|
|
16
|
-
width: 100%;
|
|
17
18
|
}
|
|
19
|
+
body{
|
|
20
|
+
width: 500px;
|
|
21
|
+
margin: 0;
|
|
22
|
+
padding: 0%;
|
|
23
|
+
}
|
|
24
|
+
.f-inner{
|
|
25
|
+
display: flex;
|
|
26
|
+
width: 100%;
|
|
27
|
+
justify-content: baseline;
|
|
28
|
+
}
|
|
29
|
+
.f-left{
|
|
30
|
+
width: 40%;
|
|
31
|
+
background-color: rgb(212, 208, 203);
|
|
18
32
|
|
|
33
|
+
height: 100px;
|
|
34
|
+
}
|
|
35
|
+
.f-right{
|
|
36
|
+
width: 60%;
|
|
37
|
+
background-color: rgb(78, 74, 57);
|
|
38
|
+
height: 100px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
19
43
|
html
|
|
20
|
-
|
|
44
|
+
<div class="f-inner">
|
|
21
|
-
|
|
45
|
+
<div class="f-left">
|
|
22
|
-
<div class="right"></div>
|
|
23
|
-
|
|
46
|
+
</div>
|
|
47
|
+
<div class="f-right">
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
24
50
|
|
|
25
51
|
### 試したこと
|
|
26
52
|
|
|
27
53
|
検証ツールでjustify-contentを全部試したのですが余白が消えません。
|
|
28
54
|
|
|
55
|
+
|
|
29
56
|
### 補足情報（FW/ツールのバージョンなど）
|
|
30
57
|
|
|
31
58
|
開発環境 VScode googlechrome
|