テーブル外枠の上下余白

tableのcssを修正したら行けそうに思うんですけど、頻繁にtableを利用する機会があるのであれば独自のスタイルを子テーマstyle.cssあたりに追加したら良いのではないかと思います。テーブル回りあれこれ | jsFiddle

アドバイス有難うございます。cssのテーブル、冒頭に15pxがあったので0にしたら以前のように表示されました。前にはなかった「margin」が追加されたようですね。なんで？　

以前のバージョンで、親のスタイルシートを全部コピペして子テーマに貼り
レイアウトなどを変更しました
今回は親テーマのテーブルCSSが優先されました（レイアウトは子テーマ）

子テーマのCSSの使い方が間違っているのでしょうか？

コピペする時に、子テーマ本来の記述より前、つまりは上の方に親テーマのcssを書けば、同じセレクタ・プロパティがあった場合、後から書いてる方(下にある方)が優先されます。

cssは常に上から読んでいって下にかいてあるものが最新です。これはcssファイルをサイトに読み込む時にも言えます。

例)子テーマstyle.cssだとして、

#main {
  width: 100%;
}

//何行か別のスタイルが書いてあって

#main {
  width: 50%;
}

こうあったら、最終的には50%が適用されます。

これを応用して、

#main {
  font-size: 14px;
  font-size: 0.875rem;
}

と書いた場合、新しいブラウザ、あるいはモダンブラウザと呼ばれるたぐいのブラウザはremと言う単位がわかるのでremで読み込みます。というよりfont-size:14pxを上書きします。
古いブラウザie6とかはremがわからないので、わからない単位は無視してわかる単位のpxで読み込みます。上書きできません。

htmlのフォントサイズが16pxの時、あるいはfont-sizeの指定がない時はデフォルトで16pxなので、上記の14pxと0.875remは等価です。

こんな感じに使えます。

親テーマにスタイルシートをコピペしてません

書き方が悪くてスミマセン
style.cssの書き方がわからないので
親テーマのstyle.cssを全部コピーして子テーマに貼り
それから子テーマstyle.css内の数字を自分用に変えてます

今回、子テーマにテーブルのマージンはなかったのですが
バージョンアップ後の親style.cssが優先されたみたいで･･

子テーマstyle.css使い方が間違っているのでしょうか？

今回は
親テーマでマージンが追加されたので
子テーマで打ち消さないと駄目なんですね

どちらがということは無いんです。
親テーマでも、一番最後の行に、marginの設定を同じセレクタで書けば、最後のが適用されると思います。

仮に、ファイルが読み込まれる順番が

親テーマ
親テーマ mobile
子テーマ
子テーマ mobile

だとしましょう。親テーマにmarginの設定が追加されたとします。そしたら、その後で読み込まれているcssにならどこに書いても同じセレクタなら上書きします。

cssよりも後で読み込まれるjQueryなら、どこよりも確実に、しかもタグの中にインラインでstyleで書き込むので最も優先されます。が、これはあまりお勧めできません。jQueryがではなく、インラインでstyleを書くということがです。

凶悪なのが、headタグの一番下にstyleタグで各設定をスタイルされてしまうと、これを上書きするのはタグにstyleを付けることしかなくなります。headの中のstyleタグ自体を書き換えれば良いことなんですが、1つだけとかならまだしも、いくつも書かれていると、部分修正が大変です。

そういう場合は親・子テーマのcssよりも優先されてしまうので、jQuery(javascript)で上書きするしか無いです。まぁ該当する(htmlを出力している)phpファイルの、styleタグを直接修正すればよいのですけども、なるべくなら親テーマは触らない方が吉なので、個人的にはjQueryをオススメするわけです。

親・子テーマに書かれていることは、その優先順位を見て、ここなら上書きできるだろうという所に書けばそれで問題はなかったりします。
順番は、headタグのcssを読み込んでいる部分を見る(下に書いてある方が優先)か、web開発環境(モダンブラウザでF12キー)で、有効になっているプロパティのスタイルシートを参照するかでわかります。

ちなみに、web開発環境で見た時、たいていFirefoxでもchromeでも「インライン」に書かれている部分が一番上に表示されるはずです。つまり何よりも優先されるのです。

#main インライン
———————
#main style.css(マウスオーバーで[http://…./simplicity-child/style.css])
———————
#main style.css(マウスオーバーで[http://…./simplicity/style.css])
———————
グレー部分(ブラウザデフォルトなど)
———————
body等 継承部分

こんな感じで表示されていると思います。該当するセレクタがない場合は省略されますが、たいてい優先順位が高い方が上に表示されるのではないかと思います。

例として、このコメント欄の上、名前やらの部分を右クリック→要素を調査(みたいなメニュー)からweb開発環境を表示すると、
#bbpress-forums fieldset.bbp-form　　bbpress.css:612
#bbpress-forums fieldset.bbp-form　　bbpress.css:608
高表示されていますよね？
中のプロパティ自体が重複してないから良い例ではないですが、上にあるのは同じセレクタでも行数が多い方でしょう？
つまりはそういうことなんです。

☓ 高表示されていますよね？
◯ こう表示されていますよね？

バージョンアップ毎にコピペしてませんヨ

自分用の子テーマstyle.cssを１度作れば、それが最優先されると思ってました
親テーマで追記があり、子テーマに書いてないと
たとえマージンだけでも
親テーマの追記したスタイルが反映されると理解しました

親テーマに例えば

h2 a {
  color: #f00;
  background-color: #333;
  padding: 10px;
}

こう書いてあって、子テーマがない時は親テーマしか無いため上記が丸ごと反映されます。子テーマは適用した段階では何も書いてないのでやはり上記スタイルが反映されます。

ふと、文字色が違うなと思った時、子テーマには、

h2 a {
  color: #ccc;
}

これだけで良いのです。他の値は親テーマから継承されます・・・と書くとわかりにくいかも知れませんが、子テーマでの同じセレクタ(h2 a)の未使用プロパティは親テーマのが使われるわけです。結果、htmlには、

h2 a {
  /*color: #f00;*/
  color: #ccc;
  background-color: #333;
  padding: 10px;
}

このようなスタイルが適用されることになります。かゆみさんが言われている内容としては、例えば

親テーマに

h2 a {
  color: #f00;
  background-color: #333;
  padding: 10px;
  margin-bottom: 100px; /*新規追加*/
}

となった場合、子テーマには、

h2 a {
  color: #ccc;
}

しかないので、新規追加された親テーマのmargin-bottom: 100px;は反映されると言われているのだと思います。
つまり、

h2 a {
  /*color: #f00;*/
  color: #ccc;
  background-color: #333;
  padding: 10px;
  margin-bottom: 100px; /*親テーマで追加されたプロパティ*/
}

こういうことだと。もしこの追加されたmargin-bottomが不必要な場合は、それを上書きすればよいわけです。

子テーマで

h2 a {
  color: #ccc;
  margin-bottom: 0;
}

これだけです。子テーマが親テーマより優先される場合はですけどね。優先されない場合は!importantがついていたりですかね。その場合は子テーマにも!importantが必要です。するとプロパティ同士は等価になりますが、読み込まれるファイルが子テーマのが後だったら子テーマのプロテパティが反映されます。

☓ プロテパティ(笑)
◯ プロパティ