CS130: Spring 2022

Tools and Technologies of the World Wide Web

CS130: Spring 2022

CSS Resources > 5. The Box Model

Every element in web design is a rectangular box. The box model refers to some of the properties that control the layout of these boxes (width, height, margin, padding, border, and box-sizing). The CSS Tricks website has a nice description of it.

Common Box Model properties

.page-section {
    box-sizing: border-box;     // "border-box" does not count padding / border in size calculations
    border: dotted 1px #CCC;    
    padding: 10px;              // note: also padding-right, padding-left, padding-top, padding-bottom
    margin: 10px;               // note: also margin-right, margin-left, margin-top, margin-bottom
    width: 50vh;                // vh stands for viewport height, vw stands for viewport width
}
Intro to the box model 1:07
Inline, block, and display 3:06
The box model properties 2:06
The box properties syntax and usage 4:07
Debugging the box model 3:28
Padding, margin, & border 5:34
Margins and layouts 3:03