השתמש ב- CSS כדי לאפס את השוליים והגבולות שלך

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

מנרמל ערכים לשוליים וריפודים

הדרך הטובה ביותר לפתור את הבעיה של מודל תיבה לא עקבי היא להגדיר את כל השוליים וערכי הריפוד של רכיבי HTML לאפס. ישנן מספר דרכים בהן תוכל לעשות זאת היא להוסיף כלל CSS זה לגיליון הסגנונות שלך:

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

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

השתמש ב- CSS כדי לנרמל גבולות

מבוגר יותר גרסאות של Internet Explorer היה גבול שקוף או בלתי נראה סביב אלמנטים. אלא אם כן תגדיר את הגבול ל- 0, הגבול הזה יכול לבלגן את פריסות הדפים שלך. אם החלטת שתמשיך לתמוך בגרסאות מיושנות אלו של IE, יהיה עליך לטפל בכך על ידי הוספת הדברים הבאים לגופך ולסגנונות ה- HTML שלך:

HTML, גוף {
שוליים: 0 פיקסלים;
ריפוד: 0px;
 גבול: 0px;
}

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

מדוע שוליים וגבולות עקביים עוסקים בעיצוב אתרים

דפדפן האינטרנט של היום עבר דרך ארוכה מהימים המטורפים שבהם כל סוג של עקביות בין דפדפנים היה משאלת לב. דפדפני האינטרנט של היום תואמים לחלוטין לתקנים. הם משחקים יפה יחד ומספקים תצוגת דף עקבית למדי בכל הדפדפנים השונים. זה כולל את הגרסאות העדכניות ביותר של Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari והדפדפנים השונים שנמצאו ב-שלל המכשירים הניידים גישה לאתרים היום.

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

מכיוון שהיבטים אלה במודל התיבה משפיעים על כל אלמנטים ה- HTML, ומכיוון שהם חיוניים ביצירת הדף פריסות, תצוגה לא עקבית פירושה שדף עשוי להיראות נהדר בדפדפן אחד, אך נראה מעט פנימי אַחֵר. כדי להילחם בבעיה זו, מעצבי אתרים רבים מנרמלים היבטים אלה של מודל הקופסא. נוהג זה ידוע גם בשם אפס הערכים לשוליים, ריפודוגבולות.

הערה על ברירות המחדל של הדפדפן

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