עיצוב שוליים - padding, margin

ריווח באמצעות padding ו-margin

כאשר נרצה לרווח בין אלמנטים שונים בתצוגה, נשתמש בתכונות padding ו-margin.

התכונה padding מציינת את הריווח שמקיף את התוכן של האובייקט, עד קו הגבול.

התכונה margin מציינת את הריווח שמחוץ לגבולות.

לפני ההתעמקות בנושא הריווחים, מומלץ להכיר את מבנה ה-box model שקובע את אופן חישוב מידות האובייקטים.

נניח לדוגמה שהגדרנו ב-HTML את האובייקט הבא בשם item:

<div class="item">
	This is an item.
</div>

נוכל לעצב אותו ב-CSS כך:

.item {
	height:150px;
	width:150px;
	border:2px solid #ff0000;
	padding:10px;
	margin:5px;
}

בדוגמה זו, קבענו שהאובייקט item יהיה במידות של 150x150 ושיהיה לו קו גבול (border) בעובי 2 פיקסלים בצבע אדום.

בתוך האובייקט יהיה ריווח פנימי (padding) של 10 פיקסלים, כך שאם נכניס בתוך האובייקט הזה אובייקטים נוספים כלשהם (לדוגמה טקסט), אז ישמר רווח של 10 פיקסל בינם לבין גבולות האובייקט. אם אנחנו עובדים במודל הקופסה border-box, אז למעשה הרוחב הפנוי בתוך האובייקט יהיה 126 פיקסלים (מתוך 150 מוקצים 2 פיקסלים מימין ועוד 2 פיקסלים משמאל לגבול, מוקצים 10 פיקסלים מימין לריווח ועוד 10 פיקסלים משמאל לריווח ונותרים 150-2x2-2x10=126 פיקסלים פנויים). באופן דומה, הגובה הפנוי בתוך האובייקט יהיה 126 פיקסלים.

כמו כן, מחוץ לאובייקט, יהיה רווח חיצוני (margin) של 5 פיקסלים מכל הכיוונים.

קיצור התכונות padding ו-margin

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

דוגמה:

.box {
	margin-top:15px;
	margin-right:30px;
	margin-bottom:10px;
	margin-left:5px;
}

בדוגמה זו, קבענו ריווח למעלה של 15 פיקסלים, ריווח מימין של 30 פיקסלים, ריווח מלמטה של 10 פיקסלים וריווח משמאל של 5 פיקסלים.

במקום להשתמש ב-4 התכונות הנפרדות, אפשר למזג אותן לתכונת margin אחת באופן הבא:

.box {
	margin:15px 30px 10px 5px;
}

נשים לב, כי סדר הערכים בתכונה margin הוא לפי כיוון השעון: למעלה, מימין, למטה ומשמאל.

כאשר התכונה margin מקבלת 3 ערכים, הערך הראשון יתייחס לריווח מלמעלה, הערך השני יתייחס לריווח (הזהה) מימין ומשמאל והערך השלישי יתייחס לערך מלמטה.

כאשר התכונה margin מקבלת 2 ערכים, הערך הראשון יתייחס לריווח (הזהה) מלמעלה ומלמטה והערך השני יתייחס לריווח (הזהה) מימין ומשמאל.

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

דוגמה:

.box2 {
	margin:15px 20px 10px;
}

.box3 {
	margin:10px 30px;
}

.box4 {
	margin:7px;
}

בדוגמה זו, הריווח של האובייקט box2 יהיה 15 פיקסלים מלמעלה, 20 פיקסלים מימין ומשמאל (20 בכל צד) ו-10 פיקסלים מלמטה.

הריווח של האובייקט box3 יהיה 10 פיקסלים מלמעלה ומלמטה ו-30 פיקסלים מימין ומשמאל.

הריווח של האובייקט box4 יהיה 7 פיקסלים מלמעלה, מלמטה, מימין ומשמאל.

באופן דומה, נוכל לקבוע קיצורים לתכונה padding.

דוגמה:

.item1 {
	padding-top:10px;
	padding-right:15px;
	padding-bottom:20px;
	padding-left:25px;
}

.item2 {
	padding:10px 15px 20px 25px;
}

.item3 {
	padding:10px 15px;
}

.item4 {
	padding:20px;
}

נשים לב כי בדוגמה זו, item1 ו-item2 מרווחים בדיוק אותו הדבר. בהגדרת העיצוב של item2 עשינו שימוש בנוסח המקוצר של padding.

ערכים נוספים אפשריים לתכונות padding, margin

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

כמו כן, ניתן להשתמש בערך השמור auto כדי לקבוע ריווח אוטומטי, כלומר, שהדפדפן יחליט בעצמו על הריווח.

דוגמה:

.item{
	margin:5% auto;
}

בדוגמה זו, הריווח החיצוני של האובייקט item הוא של 5% מהגובה מלמעלה ומלמטה (האחוזים מחושבים ביחס לגובה של האובייקט ההורה של item, כלומר, האובייקט שבתוכו item נמצא), וריווח אוטומטי מהצדדים.

ריווחים חופפים

נניח מקרה שיש בו שני אובייקטים סמוכים, זה לצד זה. אם נקבע לראשון margin של 10 פיקסל מצדדיו, ולשני margin של 15 פיקסלים מצדדיו, הרווח בין האובייקטים יהיה 15 פיקסלים.

הסיבה היא שכאשר עושים שימוש בריווחים מסוג margin בין אובייקטים, אזי הריווחים שהוגדרו לכל אחד מהאובייקטים הסכומים הם חופפים. במילים אחרות: הרווח שנוצר בין 2 אובייקטים הוא ערך ה-margin הגבוה מבין 2 הערכים (של האובייקט הראשון ושל האובייקט השני).

אם הריווח נעשה ב-padding, הרווחים אינם חופפים, כי אם מצטברים. אם לדוגמה שני אובייקטים סמוכים הגדירו padding של 10 פיקסלים לכל אחד, הרווח הנראה לעין ביניהם יהיה של 20 פיקסלים. הסיבה היא שיש לנו כאן למעשה סוג של אשליה: הריווח של ה-padding לא באמת מרווח בין האובייקטים, כי אם מוסיף רווח פנימי בתוך האובייקט. אם נגדיר לאובייקטים גבול border נוכל לראות שהאובייקטים צמודים, ויש רווח של 10 פיקסלים בתוך הגבולות. אם לא נגדיר גבול, זה יראה לנו כאילו הריווח הוא 20 פיקסלים, אבל למעשה 10 פיקסלים של ריווח שייכים לאובייקט הראשון (כי זה ריווח פנימי בתוך האובייקט) ו-10 פיקסלים של ריווח שייכים לאובייקט השני.