HTML and CSS Reference
In-Depth Information
Chapter 6
Understanding the CSS Box Model
The basic principle underlying web page layout is a concept known as the CSS box model, which regards every
HTML element as a box. The position of each box is determined by the
ow
of the web page—in other words, the
order in which the HTML elements appear in the source code. There are two main types of boxes: block-level and
inline. A
block-level
box or element—such as a
<div>
, heading, or paragraph—normally occupies all available
horizontal space, beginning on a line of its own and pushing subsequent elements down onto a new line. On
the other hand, an
inline box
or element—such as a
<span>
or image—sits alongside preceding and subsequent
inline elements.
Often, this behavior is exactly what you want, but there are many occasions when it's not. CSS allows
you to change the way elements are displayed, so you can put block-level elements alongside one another or
convert inline elements to act like block-level ones. You can even remove elements completely from the flow
of the page. The box model controls the width and height of elements, as well as the horizontal and vertical
space around them. Understanding the box model is the key to successful page layout. The basic elements are
very simple, but they often work in a counterintuitive way. The aim of this chapter is to guide you through the
mysteries of the box model to lay a solid foundation for the rest of the topic. If there's one chapter you really
need to get to grips with, this is it!
In this chapter, you'll learn about:
•
The different components of the box model
•
Controlling width and height
box-sizing
property for width and height calculations
•
Using the CSS3
•
Creating vertical and horizontal space with padding and margins
•
Centering elements
display
property to change the default layout of an element
•
Using the
•
Controlling visibility and overflow•
■
This chapter is based mainly on the CSS2.1 box model, which is likely to remain the basis for CSS layout
for the foreseeable future. Work on the CSS3 box model resumed in early 2012 after being abandoned for nearly five
years, so it's not as far advanced as other parts of CSS3.
Note
