CSS Box Model
CSS Box Model Basics
- For layout purposes, boxes come in two basic flavors: block and inline.
- Examples of elements that generate block boxes:
<div><p><h1>
- Examples of elements that generate inline boxes:
<em><a><strong>
- The box type of any element can be controlled with CSS.
The Components of Boxes
- A box consists of a content area surrounded by padding, border, and margins.
- Margins are the outer most component of a box. They are always transparent and dictate how much space is between their box and any adjacent boxes.
- Borders can be a variety of styles
- Padding is the part of the box that is inside the border and around the content area. Background settings for the element apply to the padding and content area.
Box Model Diagram
Calculating Box Dimensions
Example:
div {
width: 100px;
padding: 5px;
margin: 5px;
border: 1px solid black;
}
How big is this box?
Box Model Math
More On Boxes (not moron boxes)
- Box size can be specified by using width and height properties...
- ...But defining dimensions for a box is optional.
- Boxes with no specified dimensions are considered fluid.
- Fluid boxes are as wide as the content area of their containing box.