في هذه المقالة، سنناقش خاصية عناصر الكتلة المضمنة. إنها خاصية مفيدة جدًا لـ CSS. يمكننا تطبيقه على العلامات المختلفة. إنه جزء من خاصية عرض CSS.
سلسلة جافا العكسية
الاستخدام:
display: inline-block
من خلال تطبيق الخاصية المذكورة أعلاه، سيتصرف العنصر كعناصر مضمنة وكتلة لعناصره الفرعية. دعونا نفهم العناصر المضمنة والكتلة.
العناصر المضمنة
تُعرف العناصر التي لا تبدأ بسطر جديد بالعناصر المضمّنة. يتم دمجها كجزء من النص الرئيسي وليس إجراء منفصل. هذه العناصر تشغل المساحة المطلوبة فقط. يمكن إضافة مسافات على اليسار واليمين إلى عنصر سطري، ولكن لا يمكن إضافة ارتفاع إلى المساحة المتروكة العلوية أو السفلية أو هامش العنصر السطري.
مثال على العناصر المضمنة:
مثال:
Page Title .highlight{ background-color:#efefef} It is a demo span <span>inline element</span>; whose span is an highlighted with a grey color indicating that it is an inline tag انتاج:
أنواع البيانات في جافا
عناصر الكتلة
تُعرف العناصر التي تبدأ بسطر جديد باسم عناصر الكتلة. يكتسب عنصر الكتلة العرض الكامل المتاح لهذا المحتوى. على عكس السطر، يوجد هامش علوي وسفلي لهذه العناصر. قد تظهر عناصر مستوى الكتلة فقط داخل علامة النص. تنشئ العناصر على مستوى الكتلة بنية أكبر من العناصر المضمنة.
مثال على عناصر الكتلة:
,
ماذا يعني جوجل
مثال:
Page Title p { background-color: #8A55; } <p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p> انتاج:
محور خادم SQL
عناصر الكتلة المضمنة
تعمل قيمة العرض للكتلة المضمّنة بشكل مشابه للقيمة المضمنة مع استثناء واحد: يصبح ارتفاع هذا العنصر وعرضه قابلين للتعديل.
مثال:
span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; color:white; border: 1px solid blue; background-color: blue; } This is an example of inline-block element with a span colored as blue <span>Inline-Block</span> انتاج:
يوجد أدناه ملف الإخراج باستخدام جميع العناصر الموجودة في صفحة واحدة:
شفرة
span.a { display: inline; /* the default for span */ width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: blue; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: green; } span.c { display: block; width: 70px; height: 50px; padding: 5px; border: 1px solid blue; background-color: pink; } <h2>display: inline</h2> This is section with a inline span made blue <span>inline</span> <span>element</span> <h2>display: block</h2> This is section with a block span made pink <span>block</span> <span>element</span> . <h2>display: inline-block</h2> This is section with a inline block span made green<span>inline</span> <span>block</span>