נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

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

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

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

מדריך CSS מספר 13 - רווח בתוך אלמנט

מחבר:
בתאריך:

 

במדריך זה נלמד כיצד לסדר את הרווח בתוך אלמנטים באמצעות התכונה  .padding

כדי לראות על מה אנחנו מדברים נתחיל מהעתקת הקוד הבא לתוך קובץ ה-html :


<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container" dir="rtl">
    <span dir="RTL">פסקה שמדגימה שוליים וריפוד
    </div>
</body>
</html>

נעתיק את הקוד הבא, שנותן לאלמנט צבע רקע, קו מתאר ורוחב, לתוך גיליון ה-CSS החיצוני, style.css:

.container {
    border: 3px solid black;
    background-color:yellow;
    width: 200px;
}

נריץ את קובץ ה-html על הדפדפן, ונראה את התוצאה:

הדגמת padding שלא אלמנט באמצעות CSS

 

הוספת padding שיוצרים שוליים פנימיים

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

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

.container {
    padding: 15px;
}

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

נכתוב את הקוד הבא לתוך גיליון ה-CSS החיצוני, style.css:

.container{
    border: 3px solid black;
    background-color:yellow;
    width: 200px;
    padding: 15px;
}

נריץ בדפדפן את קובץ ה-html, ונראה את התוצאה:

הדגמת padding של פסקה אותו מרווח בכל הכיוונים

אפשר לראות את הרווח בין הכיתוב ובין הגבול השחור בכל הכיוונים. 

אם אנחנו רוצים שליטה על הכוון של ה-padding אפשר להשתמש בתכונה עם ארבעה ערכים. לדוגמה:

.container{
    padding: 15px 50px 25px 30px;
}

המשמעות של הקוד היא תן לי רווח פנימי של 15 פיקסלים מלמעלה, 50 פיקסלים מימין, 25 פיקסלים מלמטה, ו-30 פיקסלים משמאל.

הכיווניות היא לפי כיוון השעון:

;משמאל - מלמטה - מימין - למעלה : padding

נכתוב את הקוד הבא לתוך גיליון העיצוב החיצוני, style.css:

.container {
    border: 3px solid black;
    background-color:yellow;
    width: 200px;
    padding: 15px 50px 25px 30px;
}

נריץ את קובץ ה-html על הדפדפן, ונראה את התוצאה:

הדגמת padding של פסקה מרווח שונה בכל כיוון

אפשר לראות שיצרנו מרווח שונה בכל כיוון.

 

 

הוסף תגובה חדשה

 

= 4 + 5