Dublin Library

The Publishing Project

Everything is a box

  • 5 min. read

 

One way of thinking about HTML and web content is to think about boxes, multiple boxes surrounding your content. You can see these nested boxes in your browser's Dev Tools as shown in figure 1.

CSS Box Model
CSS Box Model

Starting from the inside, the boxes are:

content box
The area that the content lives in.
If the box-sizing property is set to content-box and the element is a block element, the content area's size can be explicitly defined with the following properties:
padding box
surrounds the content box and is the space created with the padding properties:
Since the padding is inside the box, the background of the box will be visible in the space that it creates.
If the box has overflow rules set, such as overflow: auto or overflow: scroll, the scrollbars will occupy this space too.
border box
The border box represents the bounds of your box and the border edge is the limit of what you can see.
You can control the borders of your content with these properties:
  • The border shorthand property
margin box
is the outermost box around your content.
Properties such as outline and box-shadow occupy this space too because they are painted on top, so they don't affect the size of our box.
You can control margins with these properties:

Calculating Content Size #

Calculating the size of the content in CSS is tricky.

By default in the CSS box model, the width and height assigned to an element are applied to the element's content box and will not consider any padding or margins. Any padding or margin will be added to the content width and will make the resulting element wider than what we intended

This means that when you set width and height, you have to adjust the value you give to allow for any border or padding that may be added.

For example, if you have four boxes with width: 25%;, if any has left or right padding or a left or right border, they will not by default fit on one line within the constraints of the parent container.

I've created an explainer in Codepen to illustrate the different values

The box-sizing property can be used to adjust this behavior:

  • content-box (default behavior)
    • If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px
  • border-box tells the browser to account for any border and padding in the values you specify for an element's width and height
    • If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.
    • box-sizing: border-box is the default styling that browsers use for the <table>, <select>, and <button> elements, and for <input> elements whose type is radio, checkbox, reset, button, submit, color, or search.

The following Pen explains the differences between the box-sizing values.

Intrinsic Versus Extrinsic Sizing #

The next question is how CSS measures the size of a box. CSS has two ways to measure the size of content: intrinsic and extrinsic:

The intrinsic size of an element is the size it would be based on its content if no external factors were applied to it.

For example, when we use the following figure + image + figcaption combination, we rely on the size of the image as it is.

The width of the figcaption element is 100% of the width of the parent. Since we didn't set up dimensions for the figure, it will take 100% of the width of the parent container.

<figure>
	<img src="img/santiago-landscape.avif"
	alt="image of Santiago landscape">
	<figcaption>image of Santiago landscape</figcaption>
</figure>

The extrinsic size of an element is the size when we add specific dimensions to the element we're sizing.

Using extrinsic sizing for the figure and image would look like this:

<figure>
	<img src="img/santiago-landscape.avif"
	height="600"
	width="800"
	alt="image of Santiago landscape">
	<figcaption>image of Santiago landscape</figcaption>
</figure>

In Intrinsic Sizing In CSS Ahmad Shadeed discusses intrinsic and extrinsic sizing and goes into details on the intrinsic sizing units.

Display Values And Their Impact On Content #

The display CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex.

Formally, the display property sets an element's inner and outer display types. The outer type sets an element's participation in the flow layout; the inner type sets the layout of its children.

As far as boxes are concerned, the display property changes the type of block they are (block or inline) and what rules its children will follow (flow layout, grid or flex).

Writing Modes #

In CSS, writing modes control the direction in which text flows within a document or component.

They can be used to create different layouts, such as vertical text or bidirectional text.

Because we changed the way which text flows the boxes that make up our content will be laid out differently and may cause unexpected layout issues

A related property when working with writing modes is text-orientation. This property will only work in vertical layouts and controls the orientation of the text in a line.

Final Thoughts #

Understanding that everything is a box made it easier for me to work through getting stuck when things didn't work out, especially when working with vertical text.

Edit on Github