منطقة إعلانية

يُمكننا وضع إعلانك هنا🧡ويُمكنك التواصل معنا عن طريق صفحةالفيس بوك

CSS Box model

Box model معنى ذلك ان كل عنصر من عناصر ال html عبارة عن صندوق (box) و ال CSS هي التي تتحكم في حجم هذا الصندوق ومكانة بالنسبة للعناصر الأخرى.

وكيف بقا هنتحكم في حجم العنصر ومكانة🤔؟؟!!

ج/ عن طريق 5 اكواد مهمين جداً؟

1التحكم في عرض العنصرwidth: 30px;

2التحكم في ارتفاع العنصرheight: 40px;

3التحكم في حدود العنصر border: 2px solid #333;

4التحكم في المسافات الداخلية (داخل حدود العنصر) او عمل هامش داخلي للعنصر مثال على ذلك:padding: 5px;

معنى ذلك ان الهامش الداخلي من اليمين 5px ومن اليسار 5px ومن اعلى 5px ومن أسفل 5px
ال padding لا يأخد قيمة سالبة

5التحكم في المسافات الخارجية (خارج حدود العنصر) او عمل هامش خارجي للعنصر مثال على ذلك:margin: 6px;

معنى ذلك ان الهامش الخارجي من اليمين 6px ومن اليسار 6px ومن اعلى 6px ومن أسفل 6px



 CSS Box model
CSS Box model



وبالتالي عرض العنصر الكلى هو: 56px

width + border-right + border-left + padding-right + padding-left + margin-right + margin-left
30px + 2px + 2px + 5px + 5px + 6px + 6px = 56px


وارتفاع العنصر الكلى هو : 66px

height + border-top + border-bottom + padding-top + padding-bottom + margin-top + margin-bottom
40px + 2px +2px + 5px + 5px + 6px + 6px = 66px



وزى ما انت شايف كده حسابات كتييير ووجع دماغ اكتر واحنا أصلا ماشيين بعلاج😂

ف اخترعنا شويه اكواد تسهل علينا الدنيا شويه والاكواد دي هي:


html {box-sizing: border-box;}

*, *:before, *:after {box-sizing: inherit;}

ياترى الاكواد دي وظيفتها ايه؟؟!!

وظيفتها انها تجعل:

عرض العنصر الكلى هو:

width +margin-right + margin-left
30px + 6px + 6px = 42px


ارتفاع العنصر الكلى هو:

height + margin-top + margin-bottom
40px + 6px + 6px =52px




المصادر

wikipedia.org

  1. CSS box model

w3schools.com

  1. CSS box model




Do not waste your time and start with us, now 😍