備忘録　table-cellの並んだ要素同士の間にmarginが効かない時

こんにちは。Maromaroのtakaです。
入社して約１ヶ月が経ちました。
現在はHTMLコーディングを主にやっております。
早くプログラミング等様々な知識を取り入れ活躍して行きたい所です。

table-cellの並んだ要素同士の間にmarginが効かない

今回は備忘録的な記事ですが…
コーディングをしている時に要素を横並びにする方法は、floatやtableやdisply:flex等色々ありますね。
私はfloatが嫌い（clear fixを知らなくてデザインが大幅に崩れた）なのでよくtableを使っています。

See the Pen eYmOrZj by 佐々木 貴徳 (@whxwrxyj) on CodePen.

大体こんな感じで並べてしまっています。
最初便利だ～なんて思ってたんですけど、
table-cellで指定されている要素はなんと要素同士の間をmarginで空けられないんですね！
最初知らなくて焦りました。
なんだpaddingで空けられるじゃん！て思ったんですけど、
それをやってしまうとレスポンシブ等でウィンドウサイズが変わったときにpadding分も幅に含めて
拡大縮小してしまうため、想定したデザインが崩れてしまうんですね（涙）
画像などは特に左右で同じ大きさのものを維持したいのに片方だけ大きくなったり・・・・なんてことにもなりますね。
初心者並みの感想だとmarginで空けられそうな気がして、頭の中が？でいっぱいになりました・・・

See the Pen MWYKKKw by 佐々木 貴徳 (@whxwrxyj) on CodePen.

（こんな感じで空きません）

どうやったら空くのか

方法としてはtable-cellにしている要素にさらにdivで囲めばmarginも効くんですが、
なんとなく面倒だったり、都合が悪かったりするときもありますよね。
そんなときはtableにしている要素に下のようにborder-collapse:separateとborder-spacingを入れてみましょう！

See the Pen MWYKKew by 佐々木 貴徳 (@whxwrxyj) on CodePen.

border-collapseとborder-spacingのセットで要素と要素の間に隙間を空けられました！
border-spacingの指定は　左右の隙間　上下の隙間の指定となります。
margin:0 -10px　を入れているのは要素間以外に外側にも隙間が出来てしまっているので、
marginで削っております。
若干癖はありますが直感的に使えるので個人的には好きです！
他にもっと良い方法はあると思いますが、方法の一つとして覚えておいて損はないかな～と思います！