ابعاد الDIV 🌸💓


في الصورة أعلاه قمت بتعيين القيم التالية 🔋
#div{
background:#ccf;
position: absolute;
left:100px; top:100px;
width:100px; height:100px;
border:20px solid #fcc;
margin:20px;
padding:10px;
}
•┈┈┈●•••••••••••••●┈┈┈•

نلاحظ أن حول الصندوق ٣ مناطق💡 هي
• 1⃣ منطقة margin أي الهامش الخارجي الشفاف (المنطقة M في الصورة أعلاه) وقيمتها ٢٠ بكسل حول الجسم الجهات الأربعة في المثال
• 2⃣ منطقة الإطار border وله لونه الخاص به (وهو المنطقة B في الصورة أعلاه) وقيمتها ٢٠ بكسل حول الجسم الجهات الأربعة في المثال
•3⃣ الوسائد padding وهو الهامش الداخلي وهو بلون الخلفية (وهو المنطقة P في الصورة أعلاه) وقيمتها ١٠ بكسل حول الجسم الجهات الأربعة في المثال
ويمكن تحديد قيمة مختلفة لكل جهة مثلا لدينا •┈┈┈●•••••••••••••●┈┈┈•

• margin
o margin-top
o margin-right
o margin-bottom
o margin-left
• padding
o padding-top
o padding-right
o padding-bottom
o padding-left 🌿
💡فإن حددنا قيمة واحدة عبر padding أو margin فإنها تكون لكل الجهات. فإن حددنا قيمتين فإن الأولى تكون لأعلى ولأسفل والثانية تكون للجانبين. فإن حددنا ٣ قيم تكون الأولى للأعلى والثانية للجانبين والثالثة لأسفل. وإن كانت أربع قيم تكون أعلى ثم يمين ثم أسفل ثم يسار على الترتيب.
Design website|💗| @progfemo96