The box model

Video and article discussing CSS and the box model.
1.4
(bouncy synthesised music) Earlier, you saw examples where styling was applied using the HTML style attribute. This attribute can be used to adjust the presentation for each element on the page, from changing the colour of an element to controlling its position on the page. However, there are limitations to this method. The style attribute must be applied to each individual HTML element on a page. While this can be done, it’s not a very efficient way to manage the presentation of your page, and it can lead to the replication of code. Cascading Style Sheets, or CSS, is designed to solve this problem by separating content and presentation, allowing you to control presentation at a global level.
48
CSS can be used to do a lot of things. You can create different layouts, change colours and fonts, and much more. Think about the way you style a document in word processing software, specifying styles for every header, paragraph, or bulleted list. Using the style attribute in HTML would be the same as manually setting the font, weight, size, and line spacing every time you create a new header. By separating presentation from context, in this case, HTML, developers can build more flexible and accessible solutions. This separation enables you to share styles across multiple pages, and to style groups of the same element in a consistent manner.
89.6
Using this approach also makes a developer’s life easier as the style information resides in one place, which avoids repetition and makes updates or changes easier to manage. Like HTML, CSS is developed by the CSS Working Group within the W3C. This group features representatives from different browser vendors and other organisations with a vested interest in CSS, as well as a group of independent experts. As users change the way they browse the web and the devices they use, the CSS Working Group is constantly developing new features to control and improve the presentation of information, and to make development more efficient. (bouncy synthesised music)

This video explains the basic principles and mechanics of CSS. Before you go any further, make sure that you have a basic understanding of cascading style sheets (CSS). After watching the video, think about how CSS makes web design more efficient, especially when you might need to update a page, or create multiple pages with a similar look and feel.

One of the fundamental concepts of CSS is the box model. In CSS, everything has a box around it and these boxes have different parts. Understanding how these boxes work is key to creating layouts and aligning items.

Parts of the box model

The box model has four main parts:

Part Function
Margin This is the outermost part of the box model, wrapping the content, padding, and border as whitespace between this box and other elements. The size of the margin can be controlled using the margin property.
Border This surrounds the content and any padding. Both the size and style of the border is controlled by the border property.
Padding This sits around the content as white space and is controlled by the padding property.
Content This is the region where your content is displayed, which can be sized using properties like width and height.

This diagram shows how the elements of the box model fit together, and where it gets the name:

CSS has two main types of boxes: block boxes and inline boxes. The type of box determines how the box behaves on a page and in relation to other boxes around it.

Let’s take a closer look at both types of boxes before seeing how to control the background and borders.

Block boxes

Block boxes exhibit a few key behaviours. They:

• break over multiple lines
• extend to fill the width of their container (filling up to 100% of the space available)
• respect <width> and <height> properties
• ‘push’ other items away when you add padding, margins, or borders to the box.

Many elements (including headers, paragraph, and <div> elements) display as a block box by default.

Add this code to JSFiddle and run it to see how block boxes work:

<p>Here is some surrounding text above the block box</p><div style= "background-color:black;color:white;padding:30px;margin:20px; width:50%;"> <h2>An example block box</h2> <p>This is a block of text inside a block box element.  It uses padding to separate it from the surrounding content.</p></div><p>Here is some surrounding text below the block box</p>

Now try modifying the style attribute values to see how the block behaves in relation to the surrounding text. Resize your browser window after you’ve clicked run. How does the width of the block box react?

Inline boxes

Some elements, including <a>, <span>, and <strong>, display inline by default, therefore they also have inline boxes.

Inline boxes:

• continue on the same line
• ignore <width> and <height> properties
• ‘push’ other items away when you add horizontal padding, margins, or borders
• don’t push items away when you add vertical padding, margins, or borders.

Now try running this example in JSFiddle:

<p>Here is some surrounding text before the inline box.<span style= "background-color:black;color:white;vertical-padding:30px;margin:50px; width=50%;">This is a block of text inside an inline box element. Notice that the vertical padding doesn't affect the spacing with the surrounding text, but the margin values do push away the surrounding text horizontally. Even though there is a width attribute specified, the text uses the full widthof the viewport.</span>Here is some surrounding text after the inline box</p>

Again, try modifying the attribute values and see how the output changes, or doesn’t change.

The type of box applied to an element is defined by the <display> property. This can be set to <block> or <inline>.

Backgrounds and borders

Now you understand the box model, the first thing we’ll explore is styling the background and borders for these boxes. There are many options for both of these. The following examples highlight some common properties.

Background colour

The <background-color> property defines the background colour of any element. This property accepts a colour value.

• using keywords (e.g. ‘red’, ‘blue’)
• using hexadecimal RGB values for specific colours (e.g. #000000, #CC22FF).

Read: This reference guide is a valuable resource for how to control colour through CSS. [1]

You should take care when choosing a background colour. For accessibility, you should ensure that there is contrast between the background and any text placed on top of it.

Borders

Borders can be used creatively to style elements on your page. You can control borders using individual properties (e.g. styling the top bar differently to the right bar if you like), or using a special short-hand notation.

The following code specifies a class with a full border and a class with just a top border:

.full { border-width: 1px; border-style: solid; border-color: black;}.top { border-top-width: 1px; border-top-style: solid; border-top-color: black;}

In these examples, we have configured the width of the border, described the style of the line (solid), and set the border colour. In addition to these options, you can also round the corners of a border using <border-radius>.

Try for yourself

• Add the CSS code example to the CSS box in JSFiddle.
• Create an HTML element that uses one of these border styles.
• Modify the styles and compare the output. Try changing line colours or line thickness, for example.

Share your experience with your fellow learners in the comments. Do you have any tips to share?

References

1. <color> – CSS: Cascading Style Sheets [Internet]. MDN Web Docs; [date unknown]. Available from: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value