The Box Model
Last updated
Last updated
The box model is a way to visualize the space taken up by an element on a page. It involves 4 main properties:
The content: This is content of the element (text, other elements, images, etc.)
The padding: This is the space between the content and each border
The border: This is the, uh, border around the element
The margin: This is the space outside the border of the element separating it from other elements
The padding, border and margin can have individual properties on each side (top, left, bottom and right).
The Browser Inspector allows you to visualise the Box Model of a selected element on the page. An example is below:
We can see the "Google Search" button element selected, and its box model shows its properties. They can be listed as below:
The button's content is ≈94 pixels wide and 34 pixels high
The button has a 1 pixel thick border all around
The button has no padding on its top and bottom but has 16 pixels of padding on its left and right
The button has a 11 pixel margin above and below it, and a 4 pixel margin to its left and right
In CSS, border, margin and padding are all properties that can be assigned to any element and given a valid measurement value. There are additional directional properties for each of these to give specific measurements for a specific side.
Below you can see how each of these are used in CSS.
Property usage: border: type thickness color;
type can take on one of the following values: solid, none, dashed, dotted, double, groove, ridge, inset, outset or hidden
thickness can take on any valid measurement as we saw in the previous section
color can take on any valid color value
To style different sides differently, you can use one of the following properties:
border-top - the top border
border-bottom - the bottom border
border-right - the right border
border-left - you can figure this one out
The type, thickness and color can also be separated out by using different properties:
border-style - the type of border
border-width - thickness of the border
border-color - color of the border
These can again be separated into the directions:
border-top-style, border-bottom-style, border-right-style, border-left-style
border-top-width, border-bottom-width, border-right-width, border-left-width
border-top-color, border-bottom-color, border-right-color, border-left-color
Property usage 1: padding: value;
This assigns the same padding on all 4 sides.
Property usage 2: padding: top right bottom left;
This takes 4 measurements, separated by spaces, and assigns them in clockwise order.
Individual sides can get different paddings in by using either padding-top, padding-bottom, padding-right or padding-left.
Property usage 1: margin: value;
This assigns the same margin on all 4 sides.
Property usage 2: margin: top right bottom left;
This takes 4 measurements, separated by spaces, and assigns them in clockwise order.
Individual sides can get different margins in by using either margin-top, margin-bottom, margin-right or margin-left.
Next, we'll finally begin to add some CSS to our html document using all the knowledge from these past 4 articles.
