マンガでわかるホームページ作成

CSSのpaddingが効かない原因と解決方法

paddingを指定したのに余白が思った通りにできていない!というアナタへCSSのpaddingが効かない原因と解決方法を解説します。

paddingの基本はこちらで復習しましょう↓

aタグ、spanタグのpaddingが効かない

原因:インライン要素だから

下記はp,a,spanにpaddingを指定しています。しかし、aとspanはpのpaddingを無視しています。

下記はさらにテキストを追加した例ですが、今度はaとspanのpaddingすら無視されています。

aタグ、spanタグにpaddingが効かない理由はインライン要素だからです。

インライン要素とは要は文章・文字のことです。

インライン要素にはpaddingを指定するべきではありません。

解決:display:blockかdisplay:inline-blockを指定する

aタグ、spanがインライン要素だからダメなのであって、ブロック要素ならいいのですから、ブロック要素にしてしまえばいいのです。

CSSのdisplayを使うと要素を変更できます。

a,span{
    display: inline-block;
}

上記を指定すると下記のようにpaddingが効くようになります。

tableのpaddingが効かない

原因:tableにはpaddingを指定するべきではない

下記はtable,tr,th,tdにpaddingを指定した例です。

IE7

chrome

IE7ではtableにpaddingが効きません。どのブラウザでもtrにpaddingは効きません。

そもそもtableにはpaddingを指定するべきではありません。

解決:tableにborder-spacingを指定するか、td・thにpaddingを指定する。

table{
    border-spacing: 10px;
}
td,th{
    padding: 20px;
}

tableにborder-spacingを指定すると等間隔の隙間を作ることができます。

また、マス内に隙間を作るときはtd・thにpaddingを指定しましょう。

selectのpaddingが効かない

原因:IE7で見ている

IEをローカル環境(自分のパソコン内)で見るとIE7相当になっていることがあります。

IE7になっているとselectのpaddingは効きません。

解決:IE11で見る

IEにてF12を押すと「開発者ツール」が開きます。

これの右上「7」と表示されている部分を「11」にすればOKです。

または下記コードをheadタグ内に記述しておくのもアリです。

これがあるとローカル環境でもIE11で表示されます。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

IE11だとselectのpaddingは下記のようになります。

img(画像)にpaddingが効かない

原因:IE5で見ている

いまどきIE5を使うことなどないと思いますが、いちおうIE5相当になるとimgでpaddingが効かなくなります。

解決:IE11で見る

新しいブラウザならimgでもpaddingが効きます。

画像がpaddingで動かない

原因:imgではなくbackground-imageで画像が指定されている

divの中にimgがあり、divにpaddingを指定するとその分imgが押し出されます。

しかし、background-imageつまり背景の場合、paddingも背景に含まれるため押し出されません。

解決:background-positionで動かす

background-imageを動かすにはbackground-positionを使用しましょう。

padding:autoやpadding:-10pxが効かない

原因:paddingはautoやマイナスが効かない

margin:autoで枠を中央寄せできるならpadding:autoで中の要素を中央寄せできそうですよね?

しかし、marginはautoやマイナスが効きますが、paddingは効きません。

解決:もう一つdivで囲みmarginでautoやマイナスを指定する

marginならautoやマイナスが使えるため、divをもう一つ利用し、marginを指定しましょう。

中の要素を中央寄せするならtext-align:centerなどもあります。

margin:autoや中央寄せについてはこちら↓

上記どれにもあてはまらないとき

paddingの問題ではなくスペルミスやセレクタ優先度なども可能性があります。下記を参考にしてみてください。

まとめ

paddingが効かないときは以下の原因が考えられます。

  • インライン要素だから
  • ブラウザが古いから
  • 背景だから
  • 仕様外だから

以上、CSSのpaddingが効かない原因と解決方法でした。

関連記事