table-cellの並んだ要素同士の間にmarginが効かない時Web制作HTML・CSSコーディング初心者シェアTweetこんにちは。Maromaroのtakaです。入社して約1ヶ月が経ちました。現在はHTMLコーディングを主にやっております。早くプログラミング等様々な知識を取り入れ活躍して行きたい所です。table-cellの並んだ要素同士の間にmarginが効かない今回は備忘録的な記事ですが...コーディングをしている時に要素を横並びにする方法は、floatやtableやdisply:flex等色々ありますね。fixを知らなくてデザインが大幅に崩れた)なのでよくtableを使っています。CodePen.大体こんな感じで並べてしまっています。最初便利だ~なんて思ってたんですけど、table-cellで指定されている要素はなんと要素同士の間をmarginで空けられないんですね!最初知らなくて焦りました。なんだpaddingで空けられるじゃん!て思ったんですけど、それをやってしまうとレスポンシブ等でウィンドウサイズが変わったときにpadding分も幅に含めて拡大縮小してしまうため、想定したデザインが崩れてしまうんですね(涙)画像などは特に左右で同じ大きさのものを維持したいのに片方だけ大きくなったり・・・・なんてことにもなりますね。CodePen.(こんな感じで空きません)どうやったら空くのか方法としてはtable-cellにしている要素にさらにdivで囲めばmarginも効くんですが、なんとなく面倒だったり、都合が悪かったりするときもありますよね。上下の隙間の指定となります。入れているのは要素間以外に外側にも隙間が出来てしまっているので、marginで削っております。postsよく読まれている記事です。1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。posts1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。XDイラストお知らせ運用Fireworksクリエーターフォントまとめ初心者サーバ用語PHPスマホアプリjQuery息抜きDreamWeaverWebディレクターJavaScriptプログラミング仕事効率PhotoshopAdobeWordPress作業効率コーディング便利ツールHTML・CSSWEB制作現場デザイン。