שימוש במאפיין CSS Line-Height כדי לקבל ריווח שורות CSS
למד כיצד להשתמש בגובה השורה של סגנון CSS כדי להשפיע על ריווח השורות שלך בדפי האינטרנט שלך.
ערכים של ריווח שורות CSS
המרווח בין שורות CSS מושפע מגובה השורה של סגנון CSS. מאפיין זה לוקח עד 5 ערכים שונים:
- רגיל: הדפדפן קובע ערך עבור המרווח בין שורות שקשור לגודל הגופן. זה בדרך כלל זהה לגודל הגופן או מעט גדול יותר (כמו 20%).
- יירש: את המרווח בין שורות צריך לקחת מן המרווח שורה של ההורה. אז אם אתה מגדיר את גובה השורה של תג הגוף שלך ל -30% יותר מאשר גודל הגופן ואת הפסקאות תגים בתוך כי הם נקבעו לרשת, הם יהיו גם קו גובה של 30% יותר מאשר גודל הגופן.
- מספר: אם ערך גובה השורה אינו מכיל יחידת מידה, הוא נחשב כמכפיל בגודל הגופן של גובה הקו. אז קו גובה של 1.25 יהיה 25% יותר מאשר גודל הגופן.
- אורך: אם ערך קו גובה יש יחידת מידה, זה את הכמות המדויקת של שטח צריך להיות בין השורות. אז, 1.25mm תביא קווים 1.25 מילימטרים זה מזה.
- אחוז: אם גובה השורה הוא אחוז, זה יהיה אחוז מגודל הגופן. אז קו גובה של 125% יהיה 25% יותר מאשר גודל הגופן.
איזה ערך אתה צריך להשתמש עבור ריווח שורות CSS
ברוב המקרים, הבחירה הטובה ביותר עבור ריווח שורות היא להשאיר את זה ברירת המחדל - או "נורמלי". זה בדרך כלל קריא ביותר ואינו דורש לעשות משהו מיוחד. אבל שינוי ריווח שורות יכול לתת את הטקסט שלך להרגיש אחרת.
אם גודל הגופן שלך מוגדר כ- ems או באחוזים, גובה הקו צריך להיות מוגדר כך. זהו הצורה הגמישה ביותר של ריווח שורות מכיוון שהוא מאפשר לקורא לשנות את גודל הגופנים שלהם ושומר על אותו יחס על המרווח בין השורות.
הגדר גובה שורה עבור גיליונות סגנון הדפסה עם ערך נקודה (pt). הנקודה היא מדד הדפסה, ולכן גודל הגופן שלך צריך להיות נקודות גם כן.
אני לא אוהב להשתמש במספר הבחירה כי גיליתי שזה מבלבל ביותר לאנשים. אנשים רבים חושבים כי המספר הוא גודל מוחלט, ולכן הם עושים את זה ענק. לדוגמה, ייתכן שיש לך גופן להגדיר ב 14px ולאחר מכן אתה מגדיר את גובה הקו ל 14 - אשר התוצאה פערים ענק בין השורות - כי המרווח שורות מוגדר פי 14 גודל הגופן.
כמה שטח אתה צריך להשתמש עבור ריווח הקו שלך
כפי שציינתי לעיל, אני ממליץ להשתמש בריווח שורות ברירת המחדל, אלא אם יש לך סיבה ספציפית לשנות את זה. שינוי המרווח בין שורות יכול להיות בעל השפעות שונות:
- טקסט זה מאוד חזק ביחד יכול להיות קשה לקריאה. אבל רווחים קטנים קו יכול להשפיע על מצב הרוח של הטקסט. אם הטקסט הוא scrushed יחד זה יכול להפוך את תחושת הטקסט נראה כהה או מתוח יותר.
- טקסט זה רחוק זה מזה יכול גם להיות קשה לקריאה. אבל רווחים רחבים שורה עושה את הטקסט נראה זורם יותר נוזל.
- שינוי המרווח בין שורות יכול להפוך טקסט שאחרת לא היה מתאים בחלל להיות קומפקטי יותר או לקחת מקום יותר בעיצובים שלך.