السلام عليكم ورحمة الله وبركاته

———-

—————————————————

أول وسم HTML يحتاجه كاتب المحتوى :  <div> و style

<div> : انشاء صندوق

<div>
هذا صندوق
</div>

من دون style سوف يكون الصندوق شفاف

—————————————————

style: شكل الصندوق

يوجد في style خمسة معاملات مهمة :

—————————————————

—————————————————

📦 3) padding — المسافة الداخلية

انشاء فراغ بين النص وحدود الصندوق.

<div style=”background:#f8fafc;padding:16px;”>
نص مريح للعين
</div>

قيم شائعة:

• 8px صغير

• 12px متوسط

• 16px ممتاز للمقالات

• 20px كبير

—————————————————

🧱 4) border — الإطار

تضيف حدود للصندوق.

<div style=”border:1px solid #e5e7eb;”>
صندوق بإطار
</div>

السمك : 1px

الشكل : solid

اللون : #e5e7eb

أشكال:

• solid خط مستقيم

• dashed متقطّع

• dotted منقّط

—————————————————

🔵 5) border-radius — تدوير الزوايا

تجعل  الزوايا ناعمة / مدوّرة.

<div style=”border-radius:12px;”>
صندوق بزوايا ناعمة
</div>

قيم شائعة:

• 6px خفيف

• 10px جميل

• 14px احترافي

• 20px ناعم جدًا

📌 بدونها → الصندوق شكله حاد وقديم

—————————————————

🔥 مثال كامل (يجمع الخمسة)

• خلفية سماوية

• نص داكن

• مسافة داخلية

• إطار خفيف

• زوايا ناعمة

ملاحظة :

كل صندوق = div
كل شكل = style
كل جمال = padding + radius