Cats in Boxes : Cat in a Corner

Learn the Box Model

Step of 9
css editor

.box {
box-sizing: border-box;
border: 2px solid brown;
width: 70px;
height: 70px;
FIXME
}

Result

html
  
    
<div class="box">
  <div class="cat"></div>
</div>
css
  
    
  
    .box {
      box-sizing: border-box; 
      border: 2px solid brown;
      width: 70px;
      height: 70px;
      FIXME
    }
  

  .cat {
    width: 30px;
    height: 30px;
  }

Our Kitten Needs Space

Oh no! Kitten is feeling crowded! Move the kitten away from the edge of the box so she can stretch her paws.

Box Model Basics

Remember, in the box model, you can put space between the edge of an element and its contents by using the padding property.

For example:

selector {    
  padding: 8px; /* Space between border and content*/
}

Target

Read more!