web関連
display:tableの間隔を調整したい
昔floatで要素の横並びを調整していたのですが、display:table-cell;のが使いやすくて現在はそっちを使っています。
よく「あ、セルの間隔調整するのってどう書くんだっけ？」ってなるので備忘録です。
display:tableの間隔調整コード
tableタグと使い方は同じで
border-collapse: separate;
border-spacing: 5px 0; /* [左右(5px)] [上下(0px)]で記述 */
ちなみにdisplay:table;を指定したところと同じ場所にコードを貼りつけないと反映されないtableのときも同じ
補足
- border-collapseプロパティ
collapse（隣接するセルのボーダーを重ねる）separate（隣接するセルのボーダーを離す）の2つの値がある- border-spacingプロパティ
border-collapseがseparateの時に有効、間隔を調整する
注意
border-spacingプロパティは[左右][上下]の間隔しか指定できない
※以下の書き方は反映されない
border-collapse: separate;
border-spacing: 2px 0 2px 10px;/* 効かない */
直近だと「display:flex;」のが便利じゃね？と思い横並びのコンテンツは「display:flex;」を使い始めた。
時間あるときに触りだけでも投稿したい