במאמר זה נדון במאפיין של אלמנטים מוטבעים בלוק. זהו מאפיין שימושי מאוד של CSS. אנחנו יכולים ליישם את זה על תגים שונים. זה חלק ממאפיין התצוגה של CSS.
מיון רשימה לפי Java
נוֹהָג:
display: inline-block
על ידי החלת המאפיין שלמעלה, האלמנט יתנהג כמו inline ובלוק עבור רכיבי הצאצא שלו. בואו נבין את האלמנטים המוטבעים והחסומים.
אלמנטים מוטבעים
האלמנטים שאינם מתחילים בקו חדש ידועים כאלמנטים מוטבעים. הם משולבים כחלק מהטקסט הראשי ולא כפעולה נפרדת. אלמנטים אלה תופסים רק את המקום הנדרש. ניתן להוסיף רווחים משמאל וימין לאלמנט מוטבע, אך לא ניתן להוסיף גובה לריפוד העליון או התחתון או השוליים של אלמנט מוטבע.
דוגמה לאלמנטים מוטבעים:
דוגמא:
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 תְפוּקָה:
אמישה פאטל
בלוק אלמנטים
האלמנטים שמתחילים בקו חדש ידועים כרכיבי בלוק. רכיב בלוק מקבל את מלוא הרוחב הזמין עבור תוכן זה. בניגוד ל-inline, יש שוליים עליונים ותחתונים עבור רכיבים אלה. אלמנטים ברמת הבלוק עשויים להופיע רק בתוך תג הגוף. אלמנטים ברמת בלוק יוצרים מבנה גדול יותר מאלמנטים מוטבעים.
דוגמה לרכיבי בלוק:
,
int במחרוזת
דוגמא:
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> תְפוּקָה:
Inline Block Elements
ערך התצוגה של בלוק מוטבע פועל בדומה ל-inline למעט חריג אחד: הגובה והרוחב של רכיב זה ניתנים לשינוי.
דוגמא:
מפת ג'אווה איטרציה
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>