Margin ו – Padding

Margin ו – padding הן 2 התכונות הנפוצות ביותר ב – CSS לריווח בין אלמנטים של HTML. התכונה margin מתייחסת לריווח מחוץ לאלמנט והתכונה padding מתייחסת לריווח בתוך האלמנט.

שנה את עיצוב הכותרת H2 בצורה הבאה :

  1. h2 {
  2.     font-size: 1.5em;
  3.     background-color: #ccc;
  4.     margin: 1em;
  5.     padding: 3em;
  6. }

בדוגמא הנ"ל, הכותרת מקבלת רווח של תו אחד מסביבה ורווח של 3 תווים בתוך הכותרת.

באפשרותך לקבוע את הריווח לכל צד של האלמנט באמצעות התכונות הבאות : margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom ו - padding-left.

מודל הקופסה ב- CSS

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

מודל הקופסה ב- CSS עובד כך שבאמצע יש את תוכן האלמנט ( למשל, טקסט ותמונה ) את תוכן האלמנט מקיפה התכונה padding לאחר מכן התכונה border ולבסוף התכונה margin. ניתן להציג את המודל ויזואלית בצורה הבאה :

התכונה Margin
התכונה Border
התכונה Padding
אלמנט ה - HTML

אתה לא חייב להשתמש בכל המודל, אך זה בהחלט מועיל לזכור את המודל ולדעת כי ניתן להחיל אותו על כל אלמנט HTML בעמוד – זהו אחד הכלים המועילים ביותר ב – CSS !

עמודים רלוונטים

רפרנס

  • התגית margin
  • התגית padding