שיעור 12: גובה ורוחב
עד עתה לא התייחסנו למימדי האלמנטים שעבדנו איתם. בשיעור זה נראה כיצד בקלות אנחנו יכולים להגדיר את הגובה והרוחב של אלמנט.
קביעת הרוחב [width]
עם התכונה -width, אתה יכול להגדיר רוחב מסוים לאלמנט.
הדוגמה הפשוטה שלמטה מספקת לנו תיבה לתוכה יכול להיות מוכנס טקסט:
div.box {
width: 200px;
border: 1px solid black;
background: orange;
}
קביעת גובה [height]
שים לב איך בדוגמה שלמעלה הגובה של התיבה נקבע על ידי תוכן התיבה. אתה יכול להשפיע על הגובה של אלמנט עם התכונה
height. כדוגמה בוא וננסה ליצור תיבה בגובה של 500px:
div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
סיכום
שיעור 9, 10, 11 ו- 12 הציגו לך מבוא למודל התיבה ב-CSS. כפי שאתה לבטח רואה, מודל התיבה מעניק לך מגוון אפשרויות. עד עתה בוודאי השתמשתה בתיבות בקוד HTML להגדרת תבנית עיצוב. אבל עם CSS ומודל התיבה תוכל עתה להשיג תבנית עיצוב אלגנטית בדיוק רב יותר ובהתאמה להמלצות ארגון האינטרנט העולמי W3C.