تعلم الـ #CSS بكل بساطة
ايش الفرق بين
display:inline;
display:block;
display:inline-block;
( شرح مفصل )
#حزب_المبرمجين #برمجة
@PrograminLovers
ايش الفرق بين
display:inline;
display:block;
display:inline-block;
( شرح مفصل )
#حزب_المبرمجين #برمجة
@PrograminLovers
أول شيء نبدأ بالـ block
بشكل تلقائي , أي عنصر من عناصر الـ HTML له خاصية display بقيمة block راح ياخذ 100% من العرض حق الـ viewport زي ماهو موضح بالصورة الأولى ( ملاحظة: الفراغ يكون بسبب الـ margin على عنصر الـ body )
بشكل تلقائي , أي عنصر من عناصر الـ HTML له خاصية display بقيمة block راح ياخذ 100% من العرض حق الـ viewport زي ماهو موضح بالصورة الأولى ( ملاحظة: الفراغ يكون بسبب الـ margin على عنصر الـ body )
ثانيا , أي عنصر من عناصر الـ HTML له خاصية الـ display بقيمة block راح يجبر العنصر الي بعده إنه ياخذ سطر جديد مهما كان الـ width لهذا العنصر ( زي ماهو موضح بالصورة 2 )
رغم إن أول div له عرض بـ 20 بكسلز فقط , العنصر الي بعده أخذ سطر جديد
رغم إن أول div له عرض بـ 20 بكسلز فقط , العنصر الي بعده أخذ سطر جديد
كثير من عناصر الـ HTML تكون قيمة خاصية الـ display لها تساوي block بشكل تلقائي , أمثلة مشهورة : ( div , h1 ) وغيرهم الكثير .. يمديك تتأكد إذا العنصر block أو لا عن طريق إنك تروح موقع زي W3S أو MDN
بالنسبة لعناصر الـ inline , هذي العناصر تاخذ width و height على قد مايحتاجوا فقط , ولا يمديك تعدل هالقيم لهم ( على الأقل بشكل مباشر ) بالإضافة لأنهم مايجبروا العناصر الي بعدهم إنهم يروحوا بسطر جديد .. أمثلة مشهورة زي img , span وغيرهم الكثير
بالإضافة لكذا , مايمديك تعطيهم هامش ( margin ) من فوق وتحت , فقط من اليمين واليسار.
ملاحظة مهمة: قلت من قبل " على الأقل بشكل مباشر " ايش يعني هالكلام؟
المعنى إنك لو حاولت تعدل العرض أو الطول بشكل مباشر , مثلا:
width:20px;
ماراح تلاقي أي تأثير .. يتبع
ملاحظة مهمة: قلت من قبل " على الأقل بشكل مباشر " ايش يعني هالكلام؟
المعنى إنك لو حاولت تعدل العرض أو الطول بشكل مباشر , مثلا:
width:20px;
ماراح تلاقي أي تأثير .. يتبع
لكن لو كان عندك عنصر زي الـ <a> وغيرت حجم الخط لحجم أكبر , كنتيجة لكذا العرض والطول لهذا العنصر راح يزيدوا لأن المحتوى أصبح أكبر.
ملاحظة مهمة : قلت قبل إن عناصر الـ inline مايمديك تعدل العرض والطول لها ( مرة ثانية, على الأقل بشكل مباشر )
مع كذا فيه استثناء لعنصر الـ img الي يعتبر inline ومع كذا يمديك تعدل على عرضه وطوله بشكل مباشر!
مع كذا فيه استثناء لعنصر الـ img الي يعتبر inline ومع كذا يمديك تعدل على عرضه وطوله بشكل مباشر!
إذا استوعبت الـ inline و block , فإنت فهمت الـ inline-block !
الـ inline-block ماتجبر العنصر الي بعدها ياخذ سطر جديد , تقدر تعدل على العرض والطول بشكل مباشر بالإضافة لأنك تقدر تعطي margin من فوق وتحت
-النهاية-
إذا فيه شيء استصعب عليكم وحابين تشوفوا له شرح الخاص مفتوح للإقتراحات
الـ inline-block ماتجبر العنصر الي بعدها ياخذ سطر جديد , تقدر تعدل على العرض والطول بشكل مباشر بالإضافة لأنك تقدر تعطي margin من فوق وتحت
-النهاية-
إذا فيه شيء استصعب عليكم وحابين تشوفوا له شرح الخاص مفتوح للإقتراحات
Loading suggestions...