marginの挙動について

Question

marginの挙動について、お聞きしたいことがございます。

<div class="calender_title">
    <p>{{$current_date->year}}年{{$current_date->month}}月</p>
    <form class="next_calender">
      <input type="submit" value="＞">
    </form>
  </div>  

.next_calender{
  display:inline-block;
}
.calender_title{
 text-align:center; 
}
.calender_title p{
  display:inline-block;

 margin-right:150px;
}

上記CSS部分のmargin-rightを指定する前は以下の画像の通りです。

指定後は以下の画像の通りです。

pタグに対しmargin-rightを設定すると、お互いに要素が引き離される挙動になります。
疑問点なのですが、何故右のform要素部分だけが右側に押しやられずにpタグ自身も左に押しやられるのでしょうか？

Answer 1

デベロッパーツールで色々いじってみて何がどう影響しているか見ていけば良いのでは。
フロントエンドをやっていく際には必須です。

• CSSの修正が捗る「リアルタイムコーディング」とは
• ChromeデベロッパーツールでCSS編集を楽しよう

それに、自分のコードなのであれば他人に解説してもらっても根本理解にはほど遠いです(他人のコードなら余計に)
こういうツールは積極活用してください。
活用できれば質問するより早く確実に理解でき、解決します。

Answer 2

margin-rightでマージンを追加して右の要素を離しても
text-align:center; で中央揃えが指定されていると
中央に配置されるよう調整されるからです。

Comments

[toll_tree]

ご回答ありがとうございました。
すみません。CSSが一部間違っていましたので、修正をしました。
ですが、ご回答頂いた通りtext-alignが原因だったようです。
少し、まだ分からない部分がある為お聞きしたいのですが、中央に配置されるように調整されるとのことなのですが、仮にmarginを右に240つけ、左に80つけた場合でも、margin-rightの値を増やせば増やすほど左にpタグ内の文字がよってしまいます。中央というのはどの部分に対しての中央のことでしょうか...?

[yasutomi]

margin-rightの値を増やせば増やすほど
右にある要素とのマージンが大きくなるので
左にpタグ内の文字がよります。

中央というのは.calender_titleにtext-align:center; が付いているなら
.calender_titleの全体に対して中央揃えになります。

[toll_tree]

ご返信ありがとうございます。
＞.calender_titleの全体に対して中央揃えになります。
こちらの部分なのですが、.calender_title全体に対しての中央といことは、margin-rightを240つけた際、その分左に寄せてしまったら、明らかに中央ではなく、左側によっているのではないかと思ってしまいます...
質問本文に添付させて頂いた画像でも、中央ではなく、左側によっているかと思います。
自分の解釈が間違ってしまっているのでしょうか...?

[miyabi_pudding]

横槍失礼します。
そうです。
解釈が微妙に間違われているように思います。
.calender_title pの左端 〜 + margin-right: 240px + 〜 .next_calenderの右端
の部分が全体の真ん中によりますので、
そりゃ、margin-rightがでかくなった分、相対的に左に寄っては見えるでしょう。
しかし、上記で挙げたものが、セットでセンターによってるので、
全体的には、真ん中になっている状態になります。
左に80pxを利かせれば、多少は、右によりますが、それでも、margin-rightの方が大きければ、
その分左に寄せられたようになります。

[toll_tree]

@miyabi_takatsukiさん
補足ありがとうございます。
ちょっと勘違いしていたかもしれないのですが、真ん中に寄るというのは、marginも含めた領域であるということなのですね

[toll_tree]

なんとなく、理解できてきた気がします。
取り敢えずは、ここで立ち止まらず先に進んでみることもいいかもしれませんし、この質問は取り敢えず解決済としておきます！

[m.ts10806]

toll_treeさん
デベロッパーツール使いこなせなきゃ何も進めるようになりませんよ。
私の回答にも書きましたが必須です。
この質問に回答している人に限らず、皆、使っています。
（この質問につけられた回答で最も高評価をされている以上、無視できないのは明白です）