CSS Borders, Margins, Padding, and Box Model

# CSS Box Model: Borders, Margins, and Padding

1. Introduction #

2. Learning Objectives #

• Understand the core Box Model (Content, Padding, Border, Margin).

• Apply margins and padding effectively.

• Use the box-sizing property to prevent layout breaks.

3. Detailed Explanations #

The Box Model Breakdown #

1. 1. Content: The actual text or image.

1. 2. Padding: The space *inside* the border, around the content.

1. 3. Border: The wall surrounding the padding and content.

1. 4. Margin: The invisible space *outside* the border, pushing other elements away.

Padding and Margins #

.box {
    padding: 20px; /* 20px on all 4 sides */
    margin-top: 10px; /* Only top margin */
    margin: 10px 20px; /* Top/Bottom 10px, Left/Right 20px */
}

Borders and Border Radius #

.card {
    border: 2px solid #333; /* thickness style color */
    border-radius: 10px; /* rounded corners */
}

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* creates a perfect circle */
}

The Magic of box-sizing: border-box #

/* Best Practice: Add this to EVERY project! */
* {
    box-sizing: border-box;
}

.fixed-box {
    width: 100%; /* Will stay 100% wide, even with padding! */
    padding: 20px;
    border: 5px solid red;
}

4. Mini Project: Profile Card #

<div class="profile-card">
    <img src="avatar.jpg" class="avatar" alt="Avatar">
    <h2>Jane Doe</h2>
    <p>Frontend Developer</p>
</div>

.profile-card {
    width: 300px;
    margin: 40px auto; /* Centers the card horizontally */
    padding: 30px; /* Breathing room inside */
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background-color: white;
    text-align: center;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1); /* Outer shadow */
}

.avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 20px; /* Pushes text down */
    border: 4px solid #indigo;
}

5. MCQs #

6. Summary #