table,tr,spanなどCSSのpaddingが効かない原因と解決方法マンガでわかるホームページ作成ホームへtable,tr,spanなどCSSのpaddingが効かない原因と解決方法2020年11月14日paddingを指定したのに余白が思った通りにできていない!paddingはhtmlによって効かない原因が異なります。CSSのpaddingが効かない原因と解決方法をtable,tr,a,span,select,imgなどケース別に解説します。【CSS】marginとは?paddingとは?両者の違い・使い分けについてmarginとpaddingはボックスの余白を調整するCSSです。marginとpaddingの使い方や違いについて説明します。この記事を読む目次table,trにpaddingが効かないそもそも論:tableにはpaddingを指定するべきではない解決:tableにborder-spacingを指定するか、td・thにpaddingを指定する。separateを指定するtableのcellpaddingが効かない原因:tdにpaddingが指定してある解決:tdのpaddingを調整しようtableのcellspacingが効かない原因:tableにborder-spacingが指定してある解決:tableのborder-spacingを調整しようpadding:autoやpadding:-10pxが効かないそもそも論:paddingはautoやマイナスが効かない解決:もう一つdivで囲みmarginでautoやマイナスを指定するaタグ、spanタグのpaddingが効かない原因:インライン要素だから解決:display:blockかdisplay:inline-blockを指定するselectのpaddingが効かない原因:IE7で見ている解決:IE11で見るimg(画像)にpaddingが効かない原因:IE5で見ている解決:IE11で見る画像がpaddingで動かない原因:imgではなくbackground-imageで画像が指定されている解決:background-positionで動かす上記どれにもあてはまらないときまとめtable,trにpaddingが効かないそもそも論:tableにはpaddingを指定するべきではない下記はtable,tr,th,tdにpaddingを指定した例です。IE7chromeIE7ではtableにpaddingが効きません。どのブラウザでもtrにpaddingは効きません。そもそもtableにはpaddingを指定するべきではありません。あと、trにはCSSは設定できないと思っておきましょう。解決:tableにborder-spacingを指定するか、td・thにpaddingを指定する。20px;}tableにborder-spacingを指定すると等間隔の隙間を作ることができます。マス内に隙間を作るときはtd・thにpaddingを指定しましょう。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。collapse」は表やマスの隙間をなくすCSSです。これが設定されているとtableのborder-spacingもpaddingが効きません。separate」を指定しましょう。separate」は表やマスの隙間を許可するCSSです。tableのcellpaddingが効かないcellpaddingはtable内のtd内の隙間を設定するhtml属性です。下記のように設定します。</tr></table>原因:tdにpaddingが指定してあるcellpaddingはtdのpaddingと同じ意味です。html属性とCSSではCSSが優先されます。cellpaddingが効かないのであればtdにpaddingが設定されているハズです。解決:tdのpaddingを調整しようよってtdのpaddingを調整しましょう。html5からCSSで調整できるhtml属性はなるべく使わないように推奨されています。tableのcellspacingが効かないcellspacingは表のマスとマスの隙間を設定するhtml属性です。下記のように設定します。</tr></table>原因:tableにborder-spacingが指定してあるborder-spacingはtdのcellspacingと同じ意味です。html属性とCSSではCSSが優先されます。cellspacingが効かないのであればtableにborder-spacingが設定されているハズです。解決:tableのborder-spacingを調整しようよってtableのborder-spacingを調整しましょう。html5からCSSで調整できるhtml属性はなるべく使わないように推奨されています。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」を指定したのに効かなくて中央寄せにならないことがあります。autoが効かない原因と修正方法・代替案を説明します。この記事を読むaタグ、spanタグのpaddingが効かない原因:インライン要素だから下記はp,a,spanにpaddingを指定しています。aとspanはpのpaddingを無視しています。下記はさらにテキストを追加した例ですが、今度はaとspanのpaddingすら無視されています。aタグ、spanタグにpaddingが効かない理由はインライン要素だからです。インライン要素とは要は文章・文字のことです。インライン要素にはpaddingを指定するべきではありません。htmlのブロック要素とインライン要素とは?htmlタグは大きくブロック要素とインライン要素に分かれます。このブロック要素とインライン要素を理解していないとCSSで装飾するときにつまづきますし、html構築でも間違ってしまいます。この記事を読む解決:display:blockかdisplay:inline-blockを指定するaタグ、spanがインライン要素だからダメなのであって、ブロック要素ならいいのですから、ブロック要素にしてしまえばいいのです。CSSのdisplayを使うと要素を変更できます。inline-block;}上記を指定すると下記のようにpaddingが効くようになります。displayの書き方を23種デモ付きで全部説明します!この記事を読むselectのpaddingが効かない原因:IE7で見ているIEをローカル環境(自分のパソコン内)で見るとIE7相当になっていることがあります。IE7になっているとselectのpaddingは効きません。解決:IE11で見るIEにてF12を押すと「開発者ツール」が開きます。これの右上「7」と表示されている部分を「11」にすればOKです。下記コードをheadタグ内に記述しておくのもアリです。これがあるとローカル環境でもIE11で表示されます。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の問題ではなくスペルミスやセレクタ優先度なども可能性があります。下記を参考にしてみてください。CSSが効かない原因と回避方法【よくあるケアレスミス】CSS効かない、htmlが崩れたときは以下に当てはまらないかチェックしてみてください。この記事を読むまとめpaddingが効かないときは以下の原因が考えられます。インライン要素だからブラウザが古いから背景だから仕様外だから以上、CSSのpaddingが効かない原因と解決方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。