CodeBlanks Logo Icon CodeBlanks
Login Register

Challenge - Box model

CSS course · Beginner · Lesson 79/82

Complete a card component using the box model.

Recall the box model

Every HTML element is a box. width and height set the content area, padding the inner space, border the edge, and margin the outer space. border-radius rounds the corners; box-shadow adds a shadow.

With box-sizing: border-box, padding and border are counted inside the width. The card width stays fixed and content no longer overflows. That is why most card components start with border-box.

Exercise Complete the card component

Add a .card class selector. Set width to 320px, padding to 1.5rem, and margin to 1rem. Set border-radius to 12px, box-shadow to 0 4px 12px rgba(0, 0, 0, 0.1), and box-sizing to border-box.

Show example solution 
/* card component */
.card {
  width: 320px;
  padding: 1.5rem;
  margin: 1rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

Shadow and corner tips

box-shadow takes horizontal, vertical, blur and spread values: 0 4px 12px rgba(0, 0, 0, 0.1) gives a soft bottom shadow. A high blur softens the shadow; the last rgba channel tunes the strength.

With border-radius, small values round a card gently; large values give a button or badge look. Using both together makes cards feel deep and modern.

Test yourself

  1. What does box-sizing: border-box change?

    .card {
  width: 300px;
  padding: 1rem;
  border: 2px solid #333;
  box-sizing: border-box;
}
    • Width grows beyond 300px
    • padding and border are counted inside 300px
    • margin resets to zero
    • border becomes invisible
    Show answer

    padding and border are counted inside 300px — Correct. With border-box, padding and border are counted inside width; the card stays 300px.

  2. Complete the value that rounds the card corners

    .card {
  padding: 1.5rem;
  border-radius: ____;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
    Show answer 
    .card {
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

  3. Match each box property to its role

    width
    Content area width
    padding
    Inner space
    border
    Edge
    margin
    Outer space

All lessons in Beginner

1 Document basics

  1. What is CSS?
  2. Linking CSS to HTML
  3. CSS rule structure
  4. Comments and whitespace
  5. Cascade and inheritance
  6. Summary - My first stylesheet

2 Basic selectors

  1. Type selectors
  2. Class and ID selectors
  3. Universal selector
  4. Grouping and comma
  5. Attribute selectors
  6. Child combinator (>)
  7. Descendant combinator (space)
  8. Summary - Theme skeleton

3 Project: My first stylesheet

  1. Project: My first stylesheet
  2. Linking and skeleton
  3. Color and font
  4. Spacing and alignment
  5. Project final - My first page

4 Text styling

  1. Font family
  2. Font size and weight
  3. Line height and spacing
  4. Text align and transform
  5. Text decoration and shadow
  6. Summary - Article typography

5 Box model

  1. What is the box model?
  2. Width and height
  3. Padding
  4. Margin
  5. Box-sizing
  6. Summary - Card component

6 Project: Personal blog

  1. Project: Personal blog
  2. Heading and typography
  3. Content box
  4. Color and background
  5. Project final - Blog page

7 Colors and backgrounds

  1. Color formats
  2. Opacity and alpha
  3. Background color
  4. Background image
  5. Background shorthand
  6. Summary - Hero section

8 Borders and shadows

  1. Border basics
  2. Border shorthand
  3. Border radius
  4. Box shadow
  5. Outline
  6. Summary - Button styles

9 Project: Portfolio card

  1. Project: Portfolio card
  2. Card skeleton
  3. Image and heading
  4. Shadow and border
  5. Project final - Portfolio card

10 List and link styles

  1. List style type
  2. List style position
  3. List style image
  4. Link states
  5. Removing text decoration
  6. Summary - Menu bar

11 Units and values

  1. Pixel and percentage
  2. em and rem
  3. vw and vh
  4. calc() function
  5. Color functions
  6. Summary - Responsive typography

12 Display and position

  1. Display property
  2. Display none and visibility
  3. Position static and relative
  4. Position absolute
  5. Position fixed and sticky
  6. Summary - Header layout

13 Overflow and z-index

  1. Overflow visible and hidden
  2. Overflow scroll and auto
  3. Z-index
  4. Float
  5. Clear and clearfix
  6. Summary - Modal skeleton

14 Beginner final

  1. Challenge - Typography
  2. Challenge - Box model
  3. Challenge - Color and background
  4. Challenge - Layout basics
  5. Challenge - Beginner capstone