アメブロでpタグのmarginが広がらない

質問

アメブロでpタグのmarginを広げたいです。
初歩的な質問で申し訳ないのですが、何故か解決できません。
Wordpressの記事をアメブロに移植するため、pタグが入っています。
cssに下記を追加してみましたが、何故か変化がありません。

p {
margin: 50px 0px 50px 0px;
}

でダメで、

.skinArticleBody p {
margin: 50px 0px 50px 0px;
}

もダメです。
.skinArticleBody2が何者なのか、いまいちよくわかりません。
新エディタを使っています。

お手数かと思いますが、どうぞよろしくお願いします。

回答No.2

Katsu_Kaiz · ベストアンサー

div.articleText p {
margin: 50px 0;
}

　これでダメなら、《!important》をくわえてみてはいかがでしょうか。

div.articleText p {
margin: 50px 0 !important;
}

　常識的には１番さんの回答で正しいかと思いますが、アメブロの HTML は複雑です。おっしゃるとおり、《div.skinArticleBody》の子どもに《div.skinArticleBody2》がいて、その子どもに《div.articleText》がいるような書き方をしています。このなかで「カスケーディングの仕組み」を考えるのは大変なので、強引に《!important》で解決する人も多いですよ。

参考URL：

http://htmq.com/csskihon/007.shtml

お礼

その親子関係がとても知りたかったです。

!importantは使わず、articleTextに記述したら無事marginが反映されました。

このたびは本当にありがとうございました。

回答No.1

ORUKA1951

より詳細度が高いセレクタ指定でmarginが指定してある。
p{} だとタイプセレクタだけですから　詳細度は[0,0,0,1]
skinArticleBody p {}は、*skinArticleBody p {}の簡易表記ですから、詳細度は[0,0,1,1]ですね。
　それで適用されないということは、もし同じ詳細度の指定があれば、そのほうが後で登場する。もし、詳細度が高い設定があれば、(決して薦めないが)それより高くするか!importantを書き加える。
　カスケーディングスタイルシートCSSを使うなら、まずカスケーディングの仕組みをしっかり身につけておかないとダメですよ。marginなどのプロパティを使うより、絶対に先に身につけておかないと使えません。とても単純ですが、ここで書ききれる内容ではないので・・
　⇒5.セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
　⇒6.値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )

お礼

どうもありがとうございます。
やはり詳細度の問題ということですね。参考にさせてもらいます。