שבט

אחוזים אנכיים ב-CSS

נתקלתי בכתבה מעניינת על משהו שלא ידעתי: כשנותנים ערכי padding או margin אנכיים (כלומר, עליונים או תחתונים) באחוזים, האחוזים מחושבים ביחס לרוחב של הבלוק המכיל.
מוזר, נכון?
נתחיל בשאלה ממתי נותנים גובה של padding ו-margin באחוזים. אז לי באופן אישי עוד לא יצא לתת padding ו-margin עליונים ותחתונים באחוזים (ימניים ושמאליים דווקא כן יצא, אם כי לעתים רחוקות), אבל צפיתי בקורס על עיצוב רספונסיבי של חברת learanble (קשורה ל-site-point. קורס מוצלח למדי), ושם דובר על דרכים לשמור על פרופורציות של תמונות רקע ברזולוציות השונות. [עדכון 11/2019: הקורס כבר לא קיים, אפשר למצוא אותו רק בארכיון האינטרנט]
אחת הדרכים שדובר עליהן היא דרך שננקטת כשבבלוק שמכיל את תמונות הרקע אין תוכן. במצב כזה הבלוק הוא בעל גובה 0 (כי אין לו תוכן),  אז צריך להגדיר לו גובה באיזשהו אופן, כדי שיראו את תמונת הרקע. הדרך לתת גובה היא באמצעות הגדרת padding-bottom. אבל אז צריך להתמודד עם השאלה: איך אפשר לתת margin-bottom קבוע, כשבעצם אנחנו רוצים שגובה הבלוק יקטן ברזולוציות נמוכות יותר (כי אנחנו צריכים תמונה קטנה יותר ברזולוציות האלה)? הפתרון הוא לתת את גובה ה-padding באחוזים, כאשר משתמשים בעובדה שהזכרנו בהתחלה: האחוז שניתן ל-padding עליון ותחתון מחושב ביחס לרוחב. מושלם בשביל התאמה לרזולוציות. ואיך מחשבים את האחוז? לוקחים את גובה התמונה, ומחלקים אותה ברוחב: אם למשל ברוחב של 800 פיקסלים אנחנו רוצים שהתמונה תהיה בעלת גובה של 460 פיקסלים, מחלקים 460 ב-800, מקבלים 0.575, ונותנים padding-bottom של 57.5%.
אמנם זה נראה לא אינטואיטיבי כל-כך, אבל נחמד שיש לזה שימוש (לפחות תאורטית 🙂 ).

כתבו תגובה

כתובת הדוא"ל שלכם לא תוצג.