كل شي صندوق — Box Model

بCSS كل عنصر صندوق من أربع طبقات من الداخل للخارج:

المحتوى ← padding (فراغ داخلي) ← border (الإطار) ← margin (فراغ خارجي):

.card {
  padding: 20px;
  border: 2px solid #4ade80;
  border-radius: 12px;
  margin: 16px;
}

النقطة قبل card تعني: عنصر له class="card". border-radius تدوير الزوايا — ونفس نظام الاختيار يعمل على id بعلامة # وعلى الوسم باسمه مباشرة.