The box model
All HTML elements can be treated as boxes. In CSS, the term box model is used while talking about design and layout. It is essentially a box that wraps around HTML elements and that can consist of, from outside to inside: margins, borders, padding, and the actual content.
So far in this book, we have given only short examples so that you could study away from a computer, and we will treat this as a textbook for as long as we can. However, to illustrate the box model, and for you to understand it, it is essential to take our examples and check them in a browser. Consider the following code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Paul Wellens - California anecdotes</title> <link rel="stylesheet" href="styles/packtpubch3_1.css" type="text/css" /> </head> <body> <div id="box"> June Lake, often called the gem of the Eastern Sierra, is a beautiful place that I visit as often as I can. </div> <...
