teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップHTML5に関する質問CSSで余白が消えません

編集履歴

回答編集履歴

4

URL

2020/04/30 09:39

投稿

rikutennis
rikutennis

スコア55

answer CHANGED
@@ -1,4 +1,4 @@
1
- [https://jsfiddle.net/awuxqejb/1/](https://jsfiddle.net/awuxqejb/1/)
1
+ [動くサンプル](https://jsfiddle.net/awuxqejb/2/)
2
2
  ```HTML
3
3
  <aside id="sidebar">
4
4
  <section>

3

シンプルに

2020/04/30 09:39

投稿

rikutennis
rikutennis

スコア55

answer CHANGED
@@ -1,25 +1,27 @@
1
- ```CSS
2
- #sidecontact{width: 100px; float: right;}
3
- ```
4
- を
5
- ```CSS
6
- #sidecontact{width: 100px; float: left;}
1
+ [https://jsfiddle.net/awuxqejb/1/](https://jsfiddle.net/awuxqejb/1/)
7
- ```
8
- にするとかですか？？
9
-
10
- 他は
11
2
  ```HTML
12
3
  <aside id="sidebar">
13
- <section>
4
+ <section>
14
- <span id="sidebanner">
5
+ <div id="sidebanner">
15
- <h2>関連リンク</h2>
6
+ <h2>関連リンク</h2>
16
-
17
- </span>
7
+ </div>
18
- <span id="sidecontact">
8
+ <div id="sidecontact">
19
- <h2>ご予約・お問い合わせ</h2>
9
+ <h2>ご予約・お問い合わせ</h2>
20
-
21
- </span>
10
+ </div>
22
- </section>
11
+ </section>
23
- </aside>
12
+ </aside>
24
13
  ```
14
+ ```CSS
15
+ #sidebar section {
16
+ display: flex;
17
+ }
18
+ #sidebanner {
19
+ padding: 20px;
25
- なども変わってくるとお思います。
20
+ background: #555;
21
+ margin: 0 20px 0 0;
22
+ }
23
+ #sidecontact {
24
+ padding: 20px;
25
+ background: #ff0000;
26
+ }
27
+ ```

2

追記

2020/04/30 09:37

投稿

rikutennis
rikutennis

スコア55

answer CHANGED
@@ -1,10 +1,13 @@
1
1
  ```CSS
2
- #sidebanner{margin-bottom: 50px;}
2
+ #sidecontact{width: 100px; float: right;}
3
3
  ```
4
+ を
5
+ ```CSS
6
+ #sidecontact{width: 100px; float: left;}
7
+ ```
4
- こちらの値を変更されましたか？？
8
+ にするとかですか？？
5
- CSSは下のものが優先されるので下から見て行った方がいいです。
6
9
 
7
-
10
+ 他は
8
11
  ```HTML
9
12
  <aside id="sidebar">
10
13
  <section>
@@ -18,4 +21,5 @@
18
21
  </span>
19
22
  </section>
20
23
  </aside>
21
- ```
24
+ ```
25
+ なども変わってくるとお思います。

1

追記

2020/04/30 09:17

投稿

rikutennis
rikutennis

スコア55

answer CHANGED
@@ -2,4 +2,20 @@
2
2
  #sidebanner{margin-bottom: 50px;}
3
3
  ```
4
4
  こちらの値を変更されましたか？？
5
- CSSは下のものが優先されるので下から見て行った方がいいです。
5
+ CSSは下のものが優先されるので下から見て行った方がいいです。
6
+
7
+
8
+ ```HTML
9
+ <aside id="sidebar">
10
+ <section>
11
+ <span id="sidebanner">
12
+ <h2>関連リンク</h2>
13
+
14
+ </span>
15
+ <span id="sidecontact">
16
+ <h2>ご予約・お問い合わせ</h2>
17
+
18
+ </span>
19
+ </section>
20
+ </aside>
21
+ ```