Understanding the CSS Box Model
Every HTML element creates a box, and with CSS, the properties of this box can be manipulated. These properties include the box's margins, borders, padding, width, and height.
HTML Elements and the Box Model
An HTML element is represented by tags such as <p> (for a paragraph). For instance, <p>Hello World</p> is an HTML element. A simple paragraph is known as a ‘block level’ element, meaning it has line breaks before and after its content. While a box is already present around elements, it is not visible until we apply some CSS rules.
Common block-level HTML tags include:
<div><h1>to<h6><p><ul><header><main><footer>
Block-level elements have line breaks above and below them, and their box extends across the full width of the document.
The Box Model
The box model explains how the various properties of an element's box interrelate. The element itself is enclosed by three properties: padding, border, and margin.
- Padding: Closest to the element, creating space between the element's content and its border.
- Border: Between the padding and the margin, providing a visual boundary around the element.
- Margin: Placed outside the border, creating space between the element and other elements.
Each of these properties can be set individually and are optional. The width and height of the element can also be set. The 0,0 axis or origin used to position the box references the top left-hand corner of the element.
The box properties of an element cannot be inherited by child elements, but they can influence each other. For example, an element's margin will affect the placement of any child element’s box.
Consider this simple HTML element:
It can be formatted with the following CSS rules:
Resulting in:
Border
The border is the line drawn around an element, separated from the element by any padding values set. Border properties include:
- border-width: Specifies the width of the border.
- border-style: Specifies the style of the border (e.g., dotted, dashed, solid).
- border-color: Specifies the color of the border.
Borders can be set specifically for each side using properties like border-left, border-right, border-top, and border-bottom. For example:
Most commonly the shorthand border property is used to set all three properties at once:
Example:
Rounded Corners with border-radius
Steve Job's loved a nice rounded corner. You can have them with your CSS borders too with border-radius. Either pick of individual corners with border-top-left-radius, border-top-right-radius:, border-bottom-left-radius and border-bottom-right-radius or (most commonly) apply the same value to all four corners.
The higher the value the more curved the corner.
Resulting in:
Padding
Padding is the space between the content of the element and the border. Padding properties include padding-left, padding-right, padding-top, and padding-bottom. For example:
This can be shortened to:
To set different values for each side we do so clockwise top > right > bottom > left:
Or to set the same value for top/bottom and left/right:
Padding cannot be inherited by other elements.
Margin
The margin is the space around the box border and can be set similarly to padding. To set all four margins to the same value:
Individually:
Or using shorthand:
As with padding, the shorthand sets the margins in a clockwise fashion: top, right, bottom, and left.
Margin: auto
Setting the margin to auto means it will take as much space as needed, dividing it equally between left and right. This is useful for centering elements.
Box Dimensions
The width and height properties can be applied to any box. When using percentage values, they are based on the parent element's dimensions, not the document's width or height. For example:
box-sizing Property
The box-sizing property allows you to change the box model used by the element. The default value is content-box, which means that padding and border are not included in the width and height of the element.
Setting it to border-box includes padding and border in the width and height, which makes it easier to size elements predictably.
It can be useful to make this behaviour the default. To do so we can use the * selector that matches all elements for example:
This ensures that all elements use the border-box model, simplifying layout management and avoiding unexpected size changes due to padding and border.
Optionally styling with box-shadow
The box-shadow property adds shadow effects around a box. It accepts values for horizontal offset, vertical offset, blur radius, spread radius (optional), and colour, for example:
When combined with border and border-radius it can be used to produce interesting effects:
Box with box-shadow
Tip: Life is too short to remember all these box-shadow properties. Use an online box-shadow generator.