صندوق CSS: margin وpadding وborder

كل عنصر صندوق. border هو الخط. padding الفراغ داخل الخط. margin الفراغ خارج الصندوق.

.card {
  margin: 16px;
  padding: 12px;
  border: 1px solid #2f6bff;
  background: #101826;
  color: white;
}

إذا التصق النص بالحافة فزِد padding. إذا تلامس صندوقان فضع margin بينهما. إذا لم يظهر خط فاكتب border.

هل margin وpadding واحد؟ لا. margin في الخارج وpadding في الداخل.

ما هو 16px؟ 16 بكسل. فراغ صغير على الشاشة.

ماذا لو لم يُكتب border؟ يبقى الصندوق بلا خط ظاهر.

أين يذهب اللون؟ background يلون داخل الصندوق وcolor يلون النص.