מדריך זה ילמד אותך את ההליך ליצירת רווח בין שני קישורים.
בואו נתחיל!
כיצד לתת רווח בין שני קישורים ב-HTML ו-CSS?
כדי לתת רווח בין שני קישורים, קודם כל, הוסף את הקישורים הנדרשים בקובץ ה-HTML.
שלב 1: הוסף קישורים ב-HTML
ב-HTML ניצור קונטיינר באמצעות התג
HTML
< div >< א href = 'https://linuxhint.com/create-html-file/' > איך יוצרים קובץ HTML? < / א >
< א href = 'https://linuxhint.com/edit-html-file/' > כיצד לערוך קובץ HTML? < / א >
< / div >
התמונה הבאה מראה שהקישורים נוספו בהצלחה:
שלב 2: סגנון ה-Div & Link
בשלב זה, סגננו את ה-div ואת הקישור באמצעות ' div ' ב-CSS. נתאים את הריפוד ל' 40 פיקסלים ' והגדר את גודל הגופן של הקישורים כ' יותר גדול ', גובה ה-div מוגדר כ' 150 פיקסלים ' והשתמש במאפיין רקע והגדר את צבע ה-div כ' שָׁחוֹר '. לאחר מכן, כוונן את רוחב הגבול כ' 5 פיקסלים ', סגנון כ' מקווקו 'וצבע כ' rgb(251, 255, 0) '.
CSS
div {ריפוד : 40 פיקסלים ;
גודל גופן : יותר גדול ;
גוֹבַה : 150 פיקסלים ;
רקע כללי : שָׁחוֹר ;
גבול : 5 פיקסלים מקווקו rgb ( 251 , 255 , 0 ) ;
}
באמצעות הקוד שלמעלה, מתקבל הפלט הבא. כפי שאתה יכול לראות, גם ה-div וגם הקישורים מעוצבים:
שלב 3: תן רווח בין שני קישורים בצורה אופקית
אנו יכולים לתת רווח בין שני קישורים בצורה אופקית באמצעות HTML ו-CSS. כאן נסביר את שתי השיטות אחת אחת.
שיטה 1: שימוש ב-HTML
כדי לתת רווח בין הקישורים מבלי לכתוב שום CSS חיצוני, אתה יכול להשתמש ב' ' ב-HTML שבו אתה רוצה ליצור שטח. ' ' מייצג שטח לא שבור. בקובץ HTML, הוספת אחד פירושה רווח אחד. אם אתה רוצה לתת יותר מקום, לא עדיף להוסיף ידנית לפי מספר הרווחים הנדרש.
בואו נעבור לדוגמא כדי להבין את המושג המוצהר!
דוגמא
כאן, נכתוב ארבע פעמים ' ' ליצור רווח אחרי הקישור הראשון בצורה כזו שהקישור השני יופיע אחרי ארבעת הרווחים.
HTML
< div >< א href = 'https://linuxhint.com/create-html-file/' > איך יוצרים קובץ HTML? < / א >
כיצד לערוך קובץ HTML?
כפי שאתה יכול לראות, מקום נוצר בצד ימין של הקישור הראשון:
שיטה 2: שימוש ב-CSS
ב-CSS, נשתמש ב-' שוליים-ימין ' מאפיין לתת רווח בין שני קישורים. ה ' שוליים-ימין 'מאפיין משמש להוספת שטח מהצד הימני של האלמנט. אתה יכול גם להגדיר את הערכים השליליים עבורו.
תחביר
התחביר של מאפיין ימין-שוליים ניתן להלן:
שוליים-ימין : ערךבמקום ' ערך ', הגדר את השוליים מהצד הימני של האלמנט. בואו נמשיך את הדוגמה.
דוגמא
כאן, נשתמש ב' א ' כדי לגשת לקישור שיצרנו ב-HTML. לאחר מכן, הגדר את הערך של מאפיין זכויות השוליים כ' 50 פיקסלים ”:
א {שוליים-ימין : 50 פיקסלים ;
}
החלל נוצר מהצד הימני של הקישור הראשון, אותו ניתן לראות למטה:
שלב 4: תן רווח בין שני קישורים אנכית
כדי לתת מרווח אנכי בין שני קישורים, ישר תחילה קישורים בצורה אנכית. זה ייעשה באמצעות ' לַחסוֹם ' הערך של ' לְהַצִיג ' מאפיין ולאחר מכן באמצעות ' גובה קו ' מאפיין לתת רווח בין שני קווי קישור.
דוגמא:
כאן, נגדיר את הערך של מאפיין התצוגה כ' לַחסוֹם ' כדי ליישר קישורים אנכית. לאחר מכן, תן את הרווח בין שני קישורים על ידי הגדרת הערך של מאפיין line-height כ' 80 פיקסלים ”:
א {לְהַצִיג : לַחסוֹם ;
גובה קו : 80 פיקסלים ;
}
כפי שאתה יכול לראות, החלל נוצר באמצעות המאפיין קו גובה:
זהו זה! הסברנו את השיטה למתן רווח בין שני קישורים ב-HTML ו-CSS.
סיכום
ה ' ', ' שוליים-ימין ', ו' גובה קו מאפיינים של CSS משמשים כדי לתת רווח אופקי ואנכי בין שני קישורים. באמצעות זה, אתה יכול להתאים את הרווח מהצד הימני והשמאלי של הקישורים. במאמר זה, הסברנו את ההליך לתת רווח בין שני קישורים בשתי שיטות שונות וסיפקנו דוגמאות קשורות.