Web_Dev_Grad

The CSS box model is a fundamental concept in web design and acts as the building blocks of web layouts. It defines the structure of every HTML element and how it is rendered in a browser, determining the layout, spacing, and sizing of elements. Understanding how it works is essential for creating clean, responsive, and well-organized web pages.

The box model is made up of 4 sections. Working from the inside out, these are the content, padding, border, and margin. Each of these are defined by a width and a height.

I find that a helpful analogy to explain the CSS box model is to think of it as a wall of paintings in a frame; those fancy paintings with matting around the painting. The content of the box is the artwork, the padding is the space between the artwork and the frame, the border is the frame itself, and the margin is the space between the frames on the wall.

To look at each in more detail:

• Content: This is the actual content of the element, like text, images, or other media. It represents the "artwork" in our analogy. The content area is where the primary visual elements of the page are rendered.
• Padding: The padding is the space between the content and the border, akin to the space between the artwork and the frame (the matting). It provides breathing room for the content, ensuring it doesn't touch the border directly. Padding can be applied uniformly on all sides or adjusted individually on each side.
• Border: The border is the visible boundary surrounding the padding, much like the frame that holds the painting. Borders can vary in width, style, and colour. They can also be styled with different effects, such as being dashed, dotted, or solid lines.
• Margin: The margin is the space outside the border that separates one element from others on the page. It can be thought of as the space between the frame and the surrounding elements. Like padding, margins can be set uniformly or adjusted individually on each side.

When multiple elements are stacked vertically, the vertical spacing between them is determined by their margins. The gap between two adjacent elements is the larger of the two elements' margins. This means that if one element has a margin of 10px and another has a margin of 20px, the space between them will be 20px, not 30px. The margin of the element with the larger margin "wins," and the smaller margin will be ignored.

#element1 {
    margin-bottom: 10px;
}

#element2 {
    margin-top: 20px;
}

In this case, the gap between element1 and element2 will be 20px, as 20px is the larger margin.

The content area is the core of the box model, and its size is defined by the width and height properties. These properties define the dimensions of the content, excluding padding, borders, and margins.

p {
    height: 100px;
    width: 100px;
}

In the example above, the <p> tag will have a content area of 100px by 100px. However, if padding, borders, or margins are applied, they will affect the total space the element occupies.

Padding is the space between the content and the border, providing a buffer between the two. Think of padding as the cushioning around the artwork in a frame. By adding padding, you ensure that the content doesn't touch the border directly, giving it some room to breathe.

You can apply padding evenly on all sides:

p {
    padding: 10px;
}  

Or you can apply different padding to each side, you can use the following shorthand:

p {
    padding: top right bottom left;
}

p {
    padding: 10px 20px 15px 25px;
}

In this case, the padding values represent the following:

• 10px: padding on the top
• 20px: padding on the right
• 15px: padding on the bottom
• 25px: padding on the left

Alternatively, if the top and bottom padding are the same or the left and right padding are the same, you can use the following syntax:

p {
    padding: top-bottom left-right;
}

p {
    padding: 10px 20px;
}

This would apply 10px of padding to the top and bottom, and 20px of padding to the left and right.

Each browser has a default padding rule. To not get caught out on different browsers, add the following rule to the top of your CSS file to set all padding to 0 before you apply your individual rules.

* {
    padding: 0;
}

The border is the outer edge that encloses the content and padding. It can be customized with different thicknesses, styles, and colours. The border style is defined in three parts: thickness, style, and colour.

The thickness of the border can be specified in pixels or with predefined keywords like thin, medium, or thick and uses the parameter of border-width.

To apply a uniform thickness:

p {
    border-width: 2px; 
}

You can also apply an uneven border thickness following the similar top, right, bottom, left rule as the padding:

p {
    border-width: 2px 4px 6px 8px;
}

These can also be applied separately, which is good for instances where you do not want all borders and so can leave out the ones you do not need.

p {
    border-top-width: 10px;
    border-right-width: 2px;
    border-bottom-width: 5px;
    border-left-width: 3px;
}

border-style determines the appearance of the border. There are several styles you can use which are all outlined here on the Mozilla developers page on them. The value I use the most is solid.

p {
    border-style: solid;
}

border-color can be set separately from the style and thickness and can take any colour value described in the colour theory section. These can either be set all at once or separately.

p {
    border-color: blue;
}

p {
    border-top-color: blue;
    border-right-color: red;
    border-bottom-color: green;
    border-right-color: yellow;
}

These rules can be combined with the following shorthand.

p {
    border: width style colour;
}

Such as:

p {
    border: 3px solid coral;
}

Or for the separate sides of border-top, border-right, border-bottom, or border-left:

p {
    border-right: 2px dashed red;
}

CSS also allows you to use an image as the border. The border-image property lets you apply an image that is divided into nine sections: the four corners, the edges, and the centre. The corners are placed at the corners of the border, and the edges can be stretched or repeated.

p {
    border-image: url('border-image.png') 30 round;
}

In this case, the image is sliced 30px from each side and is repeated along the edges.

By default, borders are square, but you can use the border-radius property to make the corners rounded. The following applies a 5px radius to all four corners. To create circles or more complex shapes, you can use different values for each corner. The values are applied clockwise starting from the top-left corner. For a perfect circle, the element must have equal height and width, and the border radius should be 50%.

p {
    border-radius: 5px;
}

p {
    border-radius: 20px 40px 5px 50px;
}

The margin is the outermost layer of the box model. It represents the space between the element's border and the surrounding elements. Margins can be set individually for each side.

p {
    margin-top: 20px;
    margin-right: 10px;
    margin-bottom: 30px;
    margin-left: 15px;
}

You can also use shorthand to set all four margins at once following the top, right, bottom, left rule.

p {
    margin: 20px 10px 30px 15px;
}

A very useful thing to do with margins is to set the left and right margins to auto resulting in the content of that container being centred.

p {
    margin: 0 auto;
}

Each browser has a default margin rule. To not get caught out on different browsers, add the following rule to the top of your CSS file to set all margins to 0 before you apply your individual rules.

* {
	margin: 0;
}

The overflow property controls how content is handled when it overflows the bounds of its container. These are the possible values.

• hidden: Content is clipped and hidden.
• scroll: A scrollbar is added, allowing users to scroll through the content.
• visible: Content overflows the box and is visible outside of it (default behaviour).

p {
    overflow: hidden;
}

You can add a scroll bar for your overflow in only the x or y position with these values:

• overflow: x;
• overflow: y;

One downside of the box model is that the border thickness and padding affect the dimensions of a box; by default the width and height properties only apply to the content area of the box, not including padding or (mentioned in the content section). To include padding and borders in the width and height calculations, you can use the box-sizing property. This is useful if you have a set space for an element to fit in and do not want to manually calculate the width including the left and right padding and borders. This is a very useful rule to put at the top of your CSS page.

* {
    box-sizing: border-box;
}

This ensures that the width and height include the padding and border, making it easier to manage layout sizes.

The default value is box-sizing: content-box;.