אם ברצוננו להוסיף ריפוד במסמך ה-Html באמצעות ה-CSS הפנימי, עלינו לבצע את השלבים המפורטים להלן. בעזרת השלבים הפשוטים הללו, נוכל להוסיף בקלות את הריפוד.
שלב 1: ראשית, עלינו להקליד את קוד ה-Html בכל עורך טקסט או לפתוח את קובץ ה-Html הקיים בעורך הטקסט בו אנו רוצים להוסיף את הריפוד.
Add the Padding in Html Hello User!... You are at JavaTpoint Site... The text on which we want to add padding.
שלב 2: כעת, עלינו למקם את הסמן בתג head ממש אחרי תג הכותרת של מסמך ה-Html ולאחר מכן להגדיר את תג כפי שמוצג בבלוק הבא.
Add the Padding in Html
שלב 3: כעת, עלינו להגדיר את המאפיין של ריפוד באותו בורר id אשר צוין ממש לפני הטקסט עליו אנו רוצים להוסיף ריפוד.
להלן חמשת המאפיינים השונים שמהם נוכל ליישם את הריפוד בכל צד:
אני. ריפוד-שמאל:
אם אנחנו רוצים להחיל רק ריפוד שמאלי על אלמנט, אז אנחנו צריכים להשתמש רק ריפוד-שמאל מאפיין בבורר המזהים. ואז עלינו להגדיר רק ערך אחד למאפיין כפי שמוצג בדוגמה הבאה:
Add the left Padding in Html div { border: 3px solid blue; padding-left: 75px; background-color: yellow; } Hello User!... You are at JavaTpoint Site... The text on which we add the 75pixel left padding. בדוק את זה עכשיו הפלט של הקוד לעיל המשתמש במאפיין padding-left מוצג בצילום המסך הבא:
ii. ריפוד-ימין:
אם אנחנו רוצים להחיל רק ריפוד נכון על אלמנט, אז אנחנו צריכים להשתמש רק ריפוד-ימין מאפיין בבורר המזהים. ואז עלינו להגדיר רק ערך אחד למאפיין כפי שמוצג בדוגמה הבאה:
Add the right Padding in Html div { border: 3px solid blue; padding-right: 250px; background-color: yellow; } Hello User!... You are at JavaTpoint Site... The text on which we add the 250pixel right padding. בדוק את זה עכשיו הפלט של הקוד לעיל המשתמש במאפיין padding-right מוצג בצילום המסך הבא:
iii. חלק עליון ריפוד:
אם אנחנו רוצים להחיל רק ריפוד עליון על אלמנט, אז אנחנו צריכים להשתמש רק ריפוד העליון מאפיין בבורר המזהים. ואז עלינו להגדיר רק ערך אחד למאפיין כפי שמוצג בדוגמה הבאה:
Add the Top Padding in Html div { border: 3px solid orange; padding-top: 25px; background-color: green; } Hello User!... You are at JavaTpoint Site... The text on which we add the 25pixel top padding. בדוק את זה עכשיו הפלט של הקוד לעיל המשתמש במאפיין padding-top מוצג בצילום המסך הבא:
iv. ריפוד תחתון:
אם אנחנו רוצים להחיל רק ריפוד תחתון על אלמנט, אז אנחנו צריכים להשתמש רק ריפוד-תחתית מאפיין בבורר המזהים. ואז עלינו להגדיר רק ערך אחד למאפיין כפי שמוצג בדוגמה הבאה:
Add the Bottom Padding in Html div { border: 3px solid orange; padding-bottom: 250px; background-color: green; } Hello User!... You are at JavaTpoint Site... The text on which we add the 250pixel bottom padding. בדוק את זה עכשיו הפלט של הקוד לעיל המשתמש במאפיין padding-bottom מוצג בצילום המסך הבא:
נגד ריפוד:
אם אנחנו רוצים להחיל את הריפוד השונה על כל ארבעת הצדדים (עליון, תחתון, שמאל, ימין), אז עלינו לציין את ארבעת הערכים בתכונת הריפוד.
padding: 10px 50px 75px 200px;
אם נציין את שני הערכים, אז עורך ה-Html מחיל את הריפוד הראשון על החלק העליון והתחתון והריפוד השני משמאל ומימין.
מחרוזות ב-c
padding: 100px 50px;
אם נציין רק ערך בתכונת ה-padding, אז עורך ה-Html יחיל את אותו ריפוד על כל ארבעת הצדדים.
padding: 100px;
דוגמאות לנכסי ריפוד:
דוגמה 1: הדוגמה הבאה משתמשת בערך אחד במאפיין padding כדי להגדיר את אותו ריפוד לכל ארבעת הצדדים.
Set one value to apply same padding div { border: 3px solid gray; padding: 100px; background-color: orange; } Hello User!... You are at JavaTpoint Site... The text on which we set the 100pixel padding to all the four side. בדוק את זה עכשיו הפלט של דוגמה 1 מוצג בצילום המסך הבא:
דוגמה 2: הדוגמה הבאה משתמשת בשני ערכים ב- ריפוד מאפיין כדי להגדיר את אותו ריפוד לצדדים הנגדיים.
Specify two value to apply same padding on opposite sides div { border: 3px solid black; padding: 100px 50px; background-color: gray; } Hello User!... You are at JavaTpoint Site... This is a text on which we set the 100 pixel padding to top and bottom and 50 pixels to left and right side. בדוק את זה עכשיו הפלט של דוגמה 2 מוצג בצילום המסך הבא:
דוגמה 3: הדוגמה הבאה משתמשת בארבעה ערכים במאפיין padding כדי להגדיר את הריפוד השונה לכל ארבעת הצדדים.
Specify four value to apply different padding on opposite sides div { border: 3px solid blue; padding: 10px 50px 75px 200px; background-color: red; } Hello User!... You are at JavaTpoint Site... This is a text on which we set the 10 pixel padding to top, 50 pixel padding to right, 75 pixel padding to bottom and 200 pixels padding to left side. בדוק את זה עכשיו הפלט של דוגמה 3 מוצג בצילום המסך הבא:
