יצירת רווחים והפרדה פיזית של אלמנטים ב- HTML עם CSS
יצירת רווחים ההפרדה הפיזית של אלמנטים ב- HTML יכול להיות קשה להבין את מעצב האינטרנט מתחיל. הסיבה לכך היא כי HTML יש תכונה המכונה "קריסת רווח לבן." אם אתה מקליד 1 רווח או 100 בקוד ה- HTML שלך, דפדפן האינטרנט באופן אוטומטי קורסת אותם רווחים עד רק מקום אחד. זה שונה מתוכנית כמו Microsoft Word , המאפשר ליוצרי מסמכים להוסיף רווחים מרובים למילים נפרדות ולאלמנטים אחרים של המסמך.
זה לא איך עובד עיצוב המרווח עובד.
אז, איך להוסיף רווחים לבנים ב- HTML שמופיעים בדף האינטרנט ? מאמר זה בוחן כמה דרכים שונות.
מקומות ב- HTML עם CSS
הדרך המועדפת להוסיף רווחים ב- HTML שלך היא עם גיליונות סגנון מדורגים (CSS) . CSS צריך לשמש כדי להוסיף כל ההיבטים החזותיים של דף אינטרנט, ומאחר המרווח הוא חלק מאופי העיצוב החזותי של הדף, CSS הוא המקום שבו אתה רוצה לעשות את זה.
ב- CSS, ניתן להשתמש בתכונות השוליים או הריפוד כדי להוסיף רווח סביב אלמנטים. נוסף על כך, המאפיין 'הזנת טקסט' מוסיף שטח לחלק הקדמי של הטקסט, כגון עבור הפסקאות הנכנסות.
הנה דוגמה כיצד להשתמש ב- CSS כדי להוסיף שטח לפני כל הפסקאות שלך. הוסף את ה- CSS הבא לגיליון הסגנונות החיצוני או הפנימי שלך :
p {
text-indent: 3em;
}
מקומות ב- HTML: בתוך הטקסט שלך
אם אתה רק רוצה להוסיף שטח נוסף או שניים לטקסט שלך, אתה יכול להשתמש בחלל שאינו שבירה.
אופי זה פועל בדיוק כמו תו רווח רגיל, רק שהוא לא מתמוטט בתוך הדפדפן.
הנה דוגמה כיצד להוסיף חמישה מקומות בתוך שורה של טקסט:
טקסט זה מכיל חמישה חללים נוספים בתוכו
משתמש ב- HTML:
טקסט זה & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; חמישה חללים נוספים בתוכו
תוכל גם להשתמש בתג
כדי להוסיף שורות נוספות.
למשפט זה יש חמש שורות שורה בסוף אותו
מדוע ריווח ב- HTML הוא רעיון רע
בעוד שאפשרויות אלה פועלות הן - האלמנט שאינו שבירת האלמנטים אכן יוסיף רווח לטקסט שלך והפסקאות הקו יוסיפו ריווח מתחת לפסקה המוצגת למעלה - זו אינה הדרך הטובה ביותר ליצירת ריווח בדף האינטרנט שלך. הוספת רכיבים אלה ל- HTML שלך מוסיפה מידע חזותי לקוד במקום להפריד את המבנה של דף (HTML) מהסגנונות החזותיים (CSS). שיטות העבודה המומלצות קובעות כי הן צריכות להיות נפרדות ממספר סיבות, כולל קלות העדכון בעתיד וגודל הקובץ הכולל וביצועי הדף.
אם אתה משתמש בגיליון סגנונות חיצוני כדי להכתיב את כל הסגנונות שלך ואת המרווח, ולאחר מכן שינוי סגנונות אלה עבור האתר כולו קל לעשות, שכן אתה פשוט צריך לעדכן את זה גיליון גיליון אחד.
שקול את הדוגמה לעיל של המשפט עם חמישה תגים בסוף זה. אם אתה רוצה את הסכום של המרווח בחלק התחתון של כל פיסקה, אתה צריך להוסיף את קוד ה- HTML לכל פיסקה באתר כולו שלך. זהו סכום סביר של סימון נוסף אשר יפוצץ את הדפים שלך.
בנוסף, אם אתה מחליט במורד הכביש כי המרווח הזה הוא יותר מדי או מעט מדי, ואתה רוצה לשנות את זה קצת, אתה צריך לערוך כל פיסקה אחת באתר האינטרנט כולו. לא תודה!
במקום להוסיף רכיבי ריווח אלה לקוד שלך, השתמש ב- CSS.
p {
ריפוד תחתון: 20px;
}
שורה אחת של CSS תוסיף רווח מתחת לפסקאות הדף שלך. אם אתה רוצה לשנות את המרווח הזה בעתיד, ערוך את השורה הזו (במקום את קוד האתר כולו) ואתה טוב ללכת!
עכשיו, אם אתה צריך להוסיף מקום אחד בחלק אחד של האתר שלך, באמצעות תג
או אחד שאינו שבירת שטח הוא לא סוף העולם, אבל אתה צריך להיות זהיר.
שימוש באפשרויות המרווחות HTML HTML יכול להיות מדרון חלקלק. אמנם אחד או שניים עלולים שלא לפגוע באתר שלך, אם תמשיך לאורך הנתיב, תציג בעיות בדפים שלך. בסופו של דבר, עדיף לך לפנות CSS עבור המרווח HTML, וכל שאר הדפים חזותיים דף אינטרנט.