הדרך בה דפדפנים טיפלו במרחב לבן אינה אינטואיטיבית בהתחלה, במיוחד אם אתה משווה את האופן שבו שפת הסימון של Hypertext מטפלת במרחב לבן ביחס לתוכניות עיבוד תמלילים. בתוכנת עיבוד תמלילים תוכלו להוסיף הרבה רווחים או כרטיסיות במסמך והמרווח הזה יבוא לידי ביטוי בתצוגת תוכן המסמך. עיצוב WYSIWYG זה אינו המקרה ב- HTML או בדפי אינטרנט.
ריווח בהדפסה
בתוכנת עיבוד תמלילים, שלוש התווים העיקריים של חלל לבן הם מֶרחָב, הכרטיסייה, ו החזרת כרכרה. כל אחת מהדמויות הללו פועלת בצורה מובחנת, אך ב- HTML, הדפדפנים מעניקים את כולם למעשה זהים. בין אם אתה מציב חלל אחד או 100 רווחים שלך סימון HTML או ערבב את המרווח שלך עם לשוניות והחזרת הכרכרה, כל אלה יצטרכו למרחב אחד כאשר הדף יועבר על ידי דפדפן. במינוח עיצוב אתרים זה ידוע בשם קריסת שטח לבן. אינך יכול להשתמש במקשי ריווח אופייניים אלה כדי להוסיף מרחב לבן בדף אינטרנט מכיוון שהדפדפן מכווץ רווחים חוזרים ונשנים למרחב אחד בלבד כאשר הוא מוצג בדפדפן,
שימוש ב- CSS ליצירת כרטיסיות HTML וריווח
אתרים כיום בנויים עם הפרדה בין מבנה לסגנון. מבנה העמוד מטופל על ידי HTML ואילו הסגנון מוכתב על ידי גליונות סגנון מדורגים. כדי ליצור רווח או להשיג פריסה מסוימת, פנה אל CSS במקום להוסיף תווי רווח לקוד ה- HTML.
אם אתה מנסה להשתמש כרטיסיות כדי ליצור עמודות טקסט, במקום זאת להשתמש
אם הנתונים שאתה מפרסם הם נתונים טבלאיים, השתמש בטבלאות כדי ליישר את הנתונים לפי רצונך. לעתים קרובות שולחנות מקבלים ראפ רע בעיצוב אתרים מכיוון שהם נוצלו לרעה ככלי פריסה טהורים במשך כל כך הרבה שנים, אך טבלאות עדיין תקפות לחלוטין אם התוכן שלך מכיל נתונים טבלאיים באמת.
שוליים, ריפוד והטיית טקסט
הדרכים הנפוצות ביותר ליצור ריווח עם CSS היא באמצעות אחד מסגנונות ה- CSS הבאים:
- שולים
- ריפוד
- כניסה לטקסט
לדוגמא, הכנס את השורה הראשונה של פיסקה כמו כרטיסייה עם ה- CSS הבא (שים לב שההנחה היא שהפסקה שלך מצורפת לה תכונה class של "first"):
עמ 'ראשון
כניסה לטקסט: 5em;
}
פסקה זו מכניסה כחמש תווים.
השתמש בשוליים או במאפייני הריפוד ב- CSS כדי להוסיף רווח בחלק העליון, התחתון, השמאלי או הימני (או שילובים של אותם צדדים) של אלמנט. השג כל סוג של מרווח הדרוש על ידי פנייה ל- CSS.
העברת טקסט ביותר מרווח אחד ללא CSS
אם כל מה שאתה רוצה הוא שהטקסט שלך יועבר יותר מרווח אחד מהפריט הקודם, השתמש במרחב שאינו שובר.
כדי להשתמש במרחב שאינו שובר, אתה מוסיף כמה פעמים שאתה צריך את זה בסימון ה- HTML שלך.
HTML מכבד את המרחבים הלא פורצים האלה ולא יקרוס אותם למרחב אחד. עם זאת, גישה זו נחשבת לפרקטיקה גרועה מכיוון שהיא מוסיפה תו HTML נוסף למסמך רק כדי להשיג את צרכי הפריסה. במידת האפשר, הימנע מהוספת חללים שאינם פורצים פשוט כדי להשיג את אפקט הפריסה והשימוש הרצוי שוליים וריפודים של CSS במקום זאת.