ここから本文です

こんにちは。いつもお世話になっております。 HTML CSSに関しての質問にな...

urawanaotarouさん

2017/1/1013:25:13

こんにちは。いつもお世話になっております。
HTML CSSに関しての質問になります。

<div style="background-image: url('http:// .jpg'); background-repeat: no-repeat; margin: auto;
background-position: center center; padding: 20px; width: 300px; height: 225px;">

おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお

</div>

とやりますと、下の添付写真のようになってしまうのです。

padding: 20px は、はじめつけてなくて、イラスト背景と字が重なっているので、後から、つけたわけなのですが、ご覧いただいたように、悲しいほど効いていません。

どうしたら padding が効くようになるのか。

アドバイス、よろしくお願いいたます。


@ ブログはワードプレスを使っています。
@ margin: auto; という要素は、いぜん、カテゴリーマスターのheitoreasorさん、に教わりつけました。
このmargin: auto という高度な記述が、padding を無効化しているのかなぁと思ったりもしたもので。

heitoreasor,div style,padding,center center,margin,div&amp;gt,p&amp;gt

閲覧数:
58
回答数:
1
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

saucy_sealさん

2017/1/1310:22:06

paddingプロパティが背景画像ごと適用されているので、
文字だけにあてればいいのではないかと。

<div style="~">
<p style="padding: 20px">おおお</p>
</div>

  • 質問者

    urawanaotarouさん

    2017/1/1319:54:06

    saucy_sealさま、返信遅れて申し訳ありません。

    なるほど、<p style="padding: 20px">おおお</p>

    とやって、パディングを反映させるわけですね。

    初心者で、この発想はなかったです。

    アドバイスありがとうございます。


    @あまり画像背景を使うわけではないので、この方法を使わせてもらおうと思っております。

    しかし、毎回この<p style="padding: 20px">おおお</p>
    打ちこむのは軽く手間でもありますから、CSSにパディングを反映さす、コードはなにかないのだろうか、とも欲も出ております。

  • その他の返信(2件)を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

質問した人からのコメント

2017/1/17 14:44:20

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

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問や知恵ノートは選択されたID/ニックネームのMy知恵袋で確認できます。