The CSS box model describes how elements take up space. Every element has padding, borders, and margins.
┌─────────────────────────┐
│ margin │
│ ┌─────────────────┐ │
│ │ border │ │
│ │ ┌───────────┐ │ │
│ │ │ padding │ │ │
// ...div {
width: 200px;
height: 100px;
padding: 20px; /* Inside the border */
border: 2px solid black;
margin: 10px; /* Outside the border */
box-sizing: border-box; /* Width includes padding/border */
}margin: 10px; /* All sides */
margin: 10px 20px; /* Top/bottom, left/right */
margin: 10px 20px 30px 40px; /* Top, right, bottom, left */
padding: 10px 20px 30px 40px; /* Same */block — Full width, stacked verticallyinline — Only takes needed width, flows with textinline-block — Hybrid of inline and blocknone — Hidden from the pageflex — Flexible layout (next lesson!)span { display: block; }
div { display: inline; }The CSS box model describes how elements take up space. Every element has padding, borders, and margins.
┌─────────────────────────┐
│ margin │
│ ┌─────────────────┐ │
│ │ border │ │
│ │ ┌───────────┐ │ │
│ │ │ padding │ │ │
// ...div {
width: 200px;
height: 100px;
padding: 20px; /* Inside the border */
border: 2px solid black;
margin: 10px; /* Outside the border */
box-sizing: border-box; /* Width includes padding/border */
}margin: 10px; /* All sides */
margin: 10px 20px; /* Top/bottom, left/right */
margin: 10px 20px 30px 40px; /* Top, right, bottom, left */
padding: 10px 20px 30px 40px; /* Same */block — Full width, stacked verticallyinline — Only takes needed width, flows with textinline-block — Hybrid of inline and blocknone — Hidden from the pageflex — Flexible layout (next lesson!)span { display: block; }
div { display: inline; }