自動で生まれてしまうmarginについて（初心者です）

前提・実現したいこと

2つのdivを左右別々に表示をしたいと考えています。

発生している問題・エラーメッセージ

それが何故か添付の画像のような形になります。

右側にあるはずのdivが自動的に左の幅内で無理やりに表示されます。
デベロッパーツールで確認すると、marginが自動的に生まれてしまっているようです。
ただ、右側divのmarginとして視覚的には表示されますが、
右下の表示上では「-」として存在しないことになっています。

画像の黒が左側にしたいdiv、赤が右側にしたいdiv、肌色が勝手にできるmarginです。

該当のソースコード

HTML
1  <div class="left_side">
2    <div class="left1">
3      <p>あいうえお……</p>
4    </div>
5    <div class="left2">
6      <p>あいうえお……</p>
7    </div>
8  </div>
9
10  <div class="right_side">
11    <p>あいうえお……</p>
12  </div>
13

Sass
1.left_side{
2  width: 40%;
3  float: left;
4  P{
5    white-space: pre-wrap;
6  }
7}
8
9.right_side{
10  width:45%;
11  margin:0;
12  P{
13    white-space: pre-wrap;
14  }
15}

試したこと

一応、右側の.right_sideにもfloat:right;をかけて調整をすれば、
実現したい形になることは確認できています。

ただ、floatで階層が変わってしまうと少し困るというのと、今後、同じような問題が発生した時の対処法などを学びたいと考えています。
原因自体がわかりかねるので……

一応、ブラウザなどの自動調整を疑って全体のmarginは消しています。

またwhite-spaceが原因かと考え、中の文字などを変えてもみましたが、構図は変わらないままです。

補足情報（FW/ツールのバージョンなど）

ruby on railsを利用しています。

hentaiman

2020/09/04 11:27

> 一応、ブラウザなどの自動調整を疑って全体のmarginは消しています。試しにhtmlのてっぺんにreset系のcss読み込んでみたらどうでしょうか？ブラウザデフォルトCSSが原因ならそれで解消するし消えないならそれ以外の問題と分かります。

kei344

2020/09/05 04:01

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

syoshinsya1

2020/09/12 13:11

失礼しました！ありがとうございます！

行動規範の内容に同意します

回答1件

ベストアンサー

floatは並べる子要素全てに設定が必要です。
また親要素の高さが0になるためclearfixを利用するのが一般的かと思います。

HTML
1<div class="clearfix"> <!-- <= 高さ対策  -->
2  <div class="left_side">
3    <div class="left1">
4      <p>あいうえお……</p>
5    </div>
6    <div class="left2">
7      <p>あいうえお……</p>
8    </div>
9  </div>
10
11  <div class="right_side">
12    <p>あいうえお……</p>
13  </div>
14</div>

SCSS
1.left_side{
2  width: 40%;
3  float: left;
4  background: #f00;
5  P{
6    white-space: pre-wrap;
7  }
8}
9
10.right_side{
11  width: 45%;
12  float: left; // <= 子要素は全てfloatが必要
13  margin: 0;
14  background: #000;
15  P{
16    white-space: pre-wrap;
17  }
18}
19.clearfix{
20  content:" ";
21  display:block;
22  clear:both;
23}

最近だとfloatよりdisplay:flexを使うことが多くなっているかと思います。

横並びのCSSについて、詳しくは下記などを参考にしてみてください。
参考：https://qiita.com/katsunory/items/99a417f4e1a763477a09

今後、同じような問題が発生した時の対処法などを学びたいと考えています。

こちらですが、期待通りの動作をしない＝間違っているのは自分である。
ということを念頭に置いて、仕様をきちんと確認するという癖をつけることだと思います。

とはいえ初学者であれば、仕様をきちんと確認すること自体がハードルが高かったりします。
そのときの個人的なおすすめは、下記の流れを覚えておくことです。
これを身につけると自己解決できて、理解も深まりやすいかと思います。

①実装してうまくいかない。
②参考になる記事を見つける。公式が望ましい。
③参考になる記事をそのまま実装する。
④参考になる記事が期待通りの動作をするか確認する。＝②の記事が本当に正しいか確認
⑤④のコードに、自分の実装したいコードを当てはめる。
⑥自分の実装したいコードが期待通りの動作をするか確認する。
⑦①と⑥を見比べて、どこが間違いだったか確認する。

投稿2020/09/04 12:33

編集2020/09/04 12:34