נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

מדריך CSS מספר 14 - הוספת שוליים ומודל התיבה

מחבר:
בתאריך:

 

במדריך הנוכחי נלמד להוסיף שוליים לאלמנט בדף באמצעות התכונה margin, ונסכם את מה שלמדנו על רווח פנימי (padding), שוליים וקו מתאר (border) באמצעות מודל התיבה.

שוליים הם מה שעוטף את האלמנט מחוץ לקו המתאר. נסתכל על השרטוט הבא:

קו המתאר (border) זה הקו השחור שעוטף את הריבוע הצהוב, ומה שמחוץ לקו המתאר, ומסומן בשרטוט בירוק, אילו הם השוליים. התכונה שקובעת את רוחבם של השוליים היא margin. אם אנחנו רוצים שוליים בדיוק באותו עובי סביב האלמנט אז נשתמש בקוד CSS מהצורה הזו:

.container { margin: 15px;
}

כלומר, אחרי margin אנחנו כותבים את הערך בפיקסלים פעם אחת.

כדי לראות את התכונה בפעולה, נדביק את הקוד הבא לקובץ ה-html:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container" dir="rtl">
    אלמנט כלשהו
    </div>
    <div class="container" dir="rtl">
    עוד אלמנט
    </div>
</body>
</html>

זהו קוד שמכיל שני אלמנטים (שני div) ששייכים לאותה מחלקה.

נכתוב את הקוד הבא לקובץ style.css:

.container {
    border: 1px solid black;
    background-color: yellow;
}

משמעות הקוד שאנחנו נותנים לאלמנטים בדף קו מתאר שחור ורקע צהוב.

נריץ את קובץ ה-html על הדפדפן, ונראה את האלמנטים כשאין ביניהם שוליים:

הוספת שוליים לאלמנט באמצעות CSS

נכתוב מחדש את הקובץ style.css, והפעם בתוספת margin:

.container {
    border: 1px solid black;
    background-color: yellow;
    margin: 20px;
}

משמעות הקוד שלאלמנטים יהיו שוליים של 20 פיקסלים בכל הכיוונים.

נריץ את הקובץ page1.html על הדפדפן, ונראה את התוצאה:

הוספת שוליים למדריך CSS באמצעות margins

אפשר לראות שוליים בין האלמנטים ובין כל אלמנט אחר בסביבה, וזה כולל אלמנט אחר מאותו סוג והדפדפן עצמו.

כדי לשלוט באופן טוב יותר בעיצוב השוליים נגדיר אותם בעזרת ארבעה ערכים, אחד לכל כיוון. נראה את הקוד הבא לדוגמה:

.container {
    margin: 20px 30px 40px 50px;
}

משמעות הקוד, שוליים של 20 פיקסלים יחסית לאלמנט שלמעלה, 30 פיקסלים יחסית לאלמנט שמימין, 40 פיקסלים יחסית לאלמנט שמתחת ו-50 פיקסלים יחסית לאלמנט שמשמאל.

כווניות ה-margin היא לפי כיוון השעון:

שמאלה- למטה- ימינה- למעלה :margin

 

מודל התיבה

מודל התיבה ב-CSS

קו המתאר בשחור מעוצב באמצעות border, החלק הצהוב שבין ה-border ובין הטקסט זה ה-padding, ועיצוב החלק הירוק שתוחם את האלמנט מבחוץ נעשה באמצעות margin

 

 

הוסף תגובה חדשה

 

= 8 + 5