הגדרות ב- CSS: מרחק בין השורות

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

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

גובה שורה

ב CSS, המרחק בין השורות ניתן להדגים על ידי הדמות הבאה.

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

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

האיור לעיל מראה איפה Photoshop יכול לציין את אחד המובילים. מספר מציין את פרמטר הגופן.

דוגמאות לשימוש בגובה קו

ב- CSS, המרחק בין השורות יכול להיות מוגדר באחוזים. דוגמה להמחשה להלן.

במקרה של ערך קטן, המשתמש באתר שלך לא יהיה נוח לקרוא.

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

עדינות של עיצוב

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

בשדה "אלמנט", במקרה שלנו יהיה טקסט. ריפוד הוא הזחה בתוך אובייקט, והשוליים הם הזחה של אובייקט. הגבול הוא מסגרת. זה יכול להיות 0 פיקסלים, ואולי 100.

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

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

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

כיצד להגדיל את המרחק בין שורות CSS

המרחק בין השורות של HTML ניתן להקצות בכיתה או לכל פסקאות בטקסט. אם תציין זאת: p {line-height: 20px; }, אז בהחלט כל פסקאות בדף יהיו שורות של 20 פיקסלים. אם אתה צריך גדלים שונים במקומות שונים, מומלץ לעשות כדלקמן.

סגנונות מרשם.

.class1 {line-height: 20px; }

.class2 {line-height: 16px; }

.class3 {line-height: 12px; }

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

לאחר מכן להחיל את השיעורים האלה. התוצאה היא כדלקמן.

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

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

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

מנוע החיפוש "גוגל" יש כלי מיוחד המסייע בניתוח זה. זה מאוד נוח עבור מנהלי אתרים.

הנה דוגמה של התוצאות שניתן.

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