Progate marginとtext-alignの違い

Question

message-wrapper text-align:center; ですが h3要素はブロック要素だと思うのですが なぜmarginではなくtext-alignなのでしょうか ブロック要素はmargin インライン要素はtext-alignを使うと学んだのですが認識が間違っているのでしょうか

Answer 1

こんにちは。

ブロック要素はmargin インライン要素はtext-alignを使うと学んだのですが認識が間違っているのでしょうか

はい、間違っています。試しにインラインに設定されている要素（spanなど）にtext-align: centerを当てて、何が起きるか見てみるといいかと思います。

text-align は CSS のプロパティで、ブロック要素または表セルボックスの水平方向の配置を設定します。

text-align - CSS: カスケーディングスタイルシート | MDN

おそらく、その人は「インライン要素の親要素はtext-alignを使う」と教えてくれたのではありませんか？

追記

CSS3 - Progate widthの相対値の設定　インラインブロック要素｜teratail

この質問を見ていて感じたのですが、ga.kuさんは「インライン要素」というものを勘違いしているかもしれません。

すごく大雑把に言うと、HTML4的には「文字っぽい要素」のような感じです。
文字のように、前の文字に続いて横に並んだり、折り返されたりするものが、インライン要素、と考えていいと思います。

でも、インライン要素という言葉はすでにHTML5には存在しない古い用語なので、覚えなくてもいいかもしれません。

Comments

[ga.ku]

回答ありがとうございます！
spanだけにtext-align:center;しても何も起きませんでした！
marginは親要素自体のボックスの位置の調整
text-alignは親要素の中に入ってる子要素の親要素内での位置調整
この理解で大丈夫でしょうか？
違ってたり補足あればお願いします

[Lhankor_Mhy]

ご理解の通りでいいと思います。
（ただし、子要素の親要素内での「インラインレイアウトの」位置調整）

[ga.ku]

ありがとうございます！
現代ではdisplay:flex;やdisplay:grid;の方が主流なんですかね

[Lhankor_Mhy]

ブロックを横並びにする場合、という話ですよね？

はい、そうです。
フロートやインラインブロックを使う方法は弊害も多いので、古いサイトのメンテをするならともかく、新しいサイトを作成するのに使うことはないでしょう。5～10年ぐらい古いです。

[ga.ku]

そんなに古かったんですか！
ショックが大きすぎます（泣）
Progateでプログラミングの雰囲気を掴んだら別の教材へ移行します！
現役の方から何かおすすめの勉強法や教材などありますでしょうか？

[Lhankor_Mhy]

私は素人なのでなんとも……
ドットインストールは質がいいと聞きますが、有料が基本です。

[ga.ku]

色々とご親切にありがとうございます！
またアドバイスのほど宜しくお願い致します。

[Lhankor_Mhy]

お力になれることがあれば喜んで。

[ga.ku]

Lhankor_Mhyさん
ありがとうございます！