cssについて質問です。

質問

cssについて質問です。
margin　と　text-align　を両方指定されている場合、どちらかが優先されるのでしょうか？

margin:6px,10px;　と指定してあるところに、
text-align:center;　を追記すると　センタリングされました。

margin:6px,0px;　と変えてみたところ、センタリングされた状態に変化がなかったように見えました。

通常は、両方を使うことはないかと思うのですが、優先順位があるのでしょうか？
単純な疑問ですが、不思議に思ったので・・。

どなたか教えていただけませんか。

回答No.3

noname#119957 · ベストアンサー

ああ～すみません、先の回答は、margin-leftのつもりでした。
これでみてください。意味がわかります。

#aa {
width: 700px;
background-color: #FFFFCC;
}
#aa p {
text-align: center;
margin-left: 150px;
background-color: #CC6600;
}

■marginを含めてセンタリングされる、と同じ意味と解釈して良いのでしょうか？
マージンは、センタリングの範囲外ですので関係有りません。

■記載する順序によっての違いはありますか？
　この場合ありません。

お礼

marginの考え方は　CSSの基本ですね。
よく理解できていませんでした。

おかげさまで、理解が深まりました。

ご回答いただき、ありがとうございました。

回答No.2

vitto

ちょっと誤解してるのかな？
margin はページ全体の余白を指定します。
text-align は文字の行揃えを指定します。

margin:6px,10px の意味は、ページの上下に6px、左右に10px の余白を設定。
この状態でテキストを中央寄せすると、テキストの左右の余白部分にマージンの余白部分が含まれてしまうため変化がないように見えてしまいます。
margin:6px,0pxとしても同様ですね。

違いを分かりやすく見るためには、テキストを中央寄せではなく、左もしくは右寄せにしてみるとその違いがはっきり分かると思います。

お礼

ご指摘いただいたように、間違った解釈をしていたようです。
margin:6px 10px　は、下に6px 左に10pxの余白の指定だと思っていました。
この場合は、上下、左右の設定なのですね。

ご回答いただき、ありがとうございました。

回答No.1

noname#119957

その場合は、両方共に有効です。
以下の例では、マージンを含めてセンタリングが行われます。

■ＨＴＭＬ
<div id="aa"><p>ddd</p></div>

■ＣＳＳ
#aa {
width: 500px;
background-color: #FFFFCC;
}
#aa p {
text-align: center;
margin-right: 200px;
}

もういちど、確認してください。

お礼

ご回答ありがとうございました。

初心者なもので、ご面倒おかけしますが、もう少し教えていただけるとたすかります。

両方ともに有効、というのと
marginを含めてセンタリングされる、と同じ意味と解釈して良いのでしょうか？

記載する順序によっての違いはありますか？

優先順位の決まり方について　ルールがあるのであれば、そちらも教えていただけませんか？

よろしくお願いいたします。