Element on top of box element
Box Model Content
Element on bottom of box element
Introduction to the Box Model
Detailed Box Model
- Box Model Levels
- Content of element [outline surrounds the element]
- padding extending between content and the border; is not colored
- border surrounding the padding space
- margin containing space between border and the next element; is not colored
Styling for the above:
/*
margin: top right bottom left;
padding: top right bottom left;
*/
article p {
text-align: center;
color: blue;
background-color: linen;
outline: 8px purple solid;
border: 5px solid green;
padding: 20px 20px 20px 20px;
margin: 10px 10px 10px 10px;
}
WC3 Introduction to Box Module
CSS Box Model 