יצירת מרחבים והפרדה פיזית של אלמנטים ב- HTML יכולים להיות קשים להבנה עבור מעצב אתרים מתחיל. זה בגלל ש HTML יש מאפיין המכונה "קריסת שטח לבן". בין אם תקליד רווח 1 או 100 בקוד ה- HTML שלך, דפדפן האינטרנט יקרוס באופן אוטומטי רווחים אלה לשטח אחד בלבד. זה שונה מתכנית כמו מייקרוסופט וורד, המאפשר ליוצרי מסמכים להוסיף רווחים מרובים כדי להפריד בין מילים ואלמנטים אחרים של המסמך. לא כך פועל המרווח בין עיצוב אתרים.
אז איך מוסיפים רווחים לבנים ב- HTML שמופיעים ב- דף אינטרנט שבנית? מאמר זה בוחן כמה מהדרכים השונות.
רווחים ב- HTML עם CSS
הדרך המועדפת להוסיף רווחים ב- HTML שלך היא באמצעות גיליונות סגנון מדורגים (CSS). יש להשתמש ב- CSS כדי להוסיף היבטים חזותיים כלשהם של דף אינטרנט, ומכיוון שהמרווח הוא חלק ממאפייני העיצוב החזותי של דף, CSS הוא המקום בו תרצו שזה ייעשה.
ב- CSS, אתה יכול להשתמש בשוליים או בתכונות הריפוד כדי להוסיף שטח סביב אלמנטים. בנוסף, מאפיין הכנסת הטקסט מוסיף מקום לחלק הקדמי של הטקסט, כמו למשל להכנסת פסקאות.
להלן דוגמה כיצד להשתמש ב- CSS כדי להוסיף מקום מול כל הפסקאות שלך. הוסף את ה- CSS הבא שלך חיצוני אוֹ פְּנִימִי גיליון סגנון:
p {
כניסה לטקסט: 3em;
}
רווחים ב- HTML בתוך הטקסט שלך
אם אתה רק רוצה להוסיף רווח או שניים נוספים לטקסט שלך, אתה יכול להשתמש במרחב שאינו שובר. דמות זו פועלת בדיוק כמו דמות חלל רגילה, רק שהיא לא קורסת בתוך הדפדפן.
הנה דוגמה כיצד להוסיף חמישה רווחים בתוך שורת טקסט:
בטקסט זה יש חמישה רווחים נוספים
משתמש ב- HTML:
בטקסט זה יש חמישה רווחים נוספים
אתה יכול גם להשתמש ב-
תג כדי להוסיף מעברי שורה נוספים.
משפט זה כולל חמש מעברי שורה בסופו
מדוע ריווח ב- HTML הוא רעיון רע
אמנם אפשרויות אלה עובדות - אלמנט הרווחים הלא שבור אכן יוסיף רווח לטקסט ולשורה הפסקות יוסיפו רווחים מתחת לפסקה המוצגת לעיל - זו אינה הדרך הטובה ביותר ליצור רווח ב עמוד אינטרנט. הוספת אלמנטים אלה ל- HTML שלך מוסיפה מידע חזותי לקוד במקום להפריד בין מבנה הדף (HTML) לסגנונות הוויזואליים (CSS). שיטות עבודה מומלצות מכתיבות כי אלה צריכים להיות נפרדים ממספר סיבות, כולל קלות העדכון בעתיד וגודל הקובץ הכללי ביצועי עמודים.
אם אתה משתמש בגיליון סגנונות חיצוני כדי להכתיב את כל הסגנונות והריווח שלך, קל לשנות את הסגנונות האלה עבור האתר כולו, מכיוון שעליך פשוט לעדכן את גיליון הסגנון האחד.
שקול את הדוגמה לעיל של המשפט עם חמש
בסוף זה. אם אתה מעוניין בכמות המרווחים בתחתית כל פסקה, תצטרך להוסיף את קוד ה- HTML הזה לכל פסקה בכל האתר שלך. זה כמות נכבדה של תוספת תוספת שתנפח את הדפים שלך. בנוסף, אם תחליט בהמשך הדרך שהמרווח הזה יהיה יותר מדי או קטן מדי, וברצונך לשנות אותו מעט, תצטרך לערוך כל פיסקה אחת באתר שלך כולו. לא תודה!
במקום להוסיף רכיבי ריווח אלה לקוד שלך, השתמש ב- CSS.
p {
ריפוד תחתון: 20 פיקסלים;
}
שורה אחת של CSS תוסיף רווח מתחת לפסקאות העמוד שלך. אם רצית לשנות את המרווח הזה בעתיד, ערוך שורה אחת זו (במקום קוד האתר שלך) ואתה יכול ללכת!
כעת, אם עליך להוסיף רווח יחיד בחלק אחד של אתר האינטרנט שלך באמצעות
תג או חלל בודד שאינו שובר אינו סוף העולם, אך עליכם להיזהר. שימוש באפשרויות ריווח HTML מוטבעות אלה יכול להיות מדרון חלקלק. אמנם אחד או שניים עשויים שלא לפגוע באתר שלך, אך אם תמשיך בדרך הזו, תציג בעיות בדפים שלך. בסופו של דבר, עדיף לך לפנות ל- CSS לריווח HTML ולכל שאר הצרכים הוויזואליים בדף האינטרנט.