ボックスモデルは、Webページ上で要素がどれだけの空間を占めるかを表します。額装した絵のように、絵の周りにマットがあり、額縁が囲み、さらに壁の余白がほかの絵との間を隔てます。
Webページのボックスでは、コンテンツの外側にパディング、その外側にボーダー、さらに外側にマージンがあります。これらの層が要素の見た目の大きさや隣との距離に影響します。
各層を知っていると、カードが中の画像や文字だけより大きな場所を取る理由が分かります。内側の余裕を変えるのか、ほかの項目との距離を変えるのかに応じて、適切な層を調整しましょう。