← Lessons

📦 Box Model

Lesson 7 of 20
🎮
Themed Universe
Game Dev Lab
Every element is a box — learn to control it!
🎯 Missions
Change 3 spacing values!
Make the border 6px thick!
Solve all 5 challenges!
● ● ● style.cssCSS

  

  

    
previewLIVE

    

      

        

          

            

              

                🎮 Content
              

            

          

        

        

          ■ margin
          ■ border
          ■ padding
          ■ content
        

      

    

  






  

    
Padding: 16px

    
  

  

    
Margin: 16px

    
  

  

    
Border: 2px

    
  

  

    
Width: 140px

    
  

  

    
Height: 70px

    
  

  

    
Border color

    

      
      
      
      
      
    

  






  

    
🎯 Challenge: Set padding to 30px — drag the slider!

    

      Step 1 of 5
      
      
      
    

  






  

    
📦 Box Model

    
In Lesson 6 you styled text with fonts and sizes. Now learn the secret of web pages: every element is a box! You can control the space inside, outside, and around each box. 🎮

    

      
↔️Padding — space between the content and the border.

      
🔲Border — the edge around your content.

      
↕️Margin — space between this box and other things.

      
📐Width & Height — how big the content area is.