פרק 7: רווחים ומילוי

בפרק זה נלמד על:

• רווחים פנימיים (Padding)
• רווחים חיצוניים (Margin)
• הבדלים בין Padding ל-Margin

רווחים פנימיים (Padding)

רווח פנימי (Padding) הוא הרווח בין התוכן של האלמנט לבין גבולות האלמנט. ניתן להגדיר אותו באמצעות המאפיין padding.

          
            .padded-box {
              padding: 20px;
              background-color: #eee;
            }
            
            .padded-box-specific {
              padding-top: 10px;
              padding-right: 20px;
              padding-bottom: 15px;
              padding-left: 5px;
            }
          
        

רווחים חיצוניים (Margin)

רווח חיצוני (Margin) הוא הרווח בין גבולות האלמנט לבין האלמנטים הסמוכים. ניתן להגדיר אותו באמצעות המאפיין margin.

          
            .margin-box {
              margin: 30px;
              background-color: #ccc;
            }
            
            .margin-box-specific {
              margin-top: 10px;
              margin-right: 20px;
              margin-bottom: 30px;
              margin-left: 40px;
            }
          
        

הבדלים בין Padding ל-Margin

ההבדל העיקרי בין Padding ל-Margin הוא ש-Padding הוא הרווח בתוך גבולות האלמנט, בעוד ש-Margin הוא הרווח מחוץ לגבולות האלמנט. לדוגמה, אם נוסיף Padding לאלמנט, התוכן של האלמנט יזוז פנימה, אך גבולות האלמנט יישארו באותו מקום. לעומת זאת, אם נוסיף Margin, האלמנט יזוז כלפי חוץ מהאלמנטים הסמוכים לו.