Box model

Every element in the web is a square, and as such, it has intrinsic characteristics: width, height, padding, border, and margin. All these characteristics, put together, make the box model.

The almighty box model is one of the most talked about subjects in the CSS industry due to IE6 and IE7 being the most popular browsers back in the day. However, they had major issues interpreting this simple CSS concept. This meant the web designers and developers had to come up with all sorts of tricks to get around such a problem. Those days are now gone, for the most part at least.

Let's move on to the box model properties.

width

The width CSS property specifies the width of an element's content area, and it looks like this:

width: 10px;

Alternatively, it could also look like this:

width: 10px 50px;

Description

The content area is inside the padding, border, and margin of the element.

Let's talk about the most used values and keywords: the length value, percentage value, auto, max-content, min-content, and fit-content.

Length value

This is basically when we use one of the following units: px, em, in, mm, cm, vw, and so on.

Percentage value

This is when we use percentages such as 50%, 85%, and so on.

auto

This is a keyword value that allows the browser to choose the width of the element.

max-content

This is a keyword value that makes the container take the width of its content.

min-content

This is a keyword value that makes the container as small as possible depending on its content.

fit-content

This is a keyword value that makes the container match the width of its content. This works great on containers with unknown or variable width.

You can find more information on MDN at http://tiny.cc/mdn-width

CSS:

/*max-content*/
.element {
  width: max-content;
}
/*min-content*/
.element {
  width: min-content;
}
/*fit-content*/
.element {
  width: fit-content;
}

Here is a demo in CodePen: http://tiny.cc/width

height

The height CSS property specifies the height of an element's content area, and it looks like this:

height: 200px;

Description

The content area is inside the padding, border, and margin of the element.

The most used values are a length value, a percentage value, and inherit.

Length value

This is basically when we use one of the following units: px, em, in, mm, cm, vw, and so on.

Percentage value

This is when we use percentages such as 50%, 85%, and so on.

inherit

With this keyword, the element will inherit its parent container's height.

You can find more information on MDN at http://tiny.cc/mdn-height

CSS:

/*Length value*/
.element {
  height: 200px;
}
/*Percentage value*/
.element {
  height: 50%;
}
/*Inherit value*/
.element {
  height: inherit;
}

padding

The padding CSS property creates a space on all four sides of an element on the inside, between its content and the edges, and it looks like this:

padding: 10px;

Alternatively, it could also look like this:

padding: 10px 15px;

Description

Borders and margins are outside of the content area and do not get affected by the padding.

The padding property is the shorthand for padding-top, padding-right, padding-bottom, and padding-left. We can use one, two, three, or all four values.

• One value: This means that all four sides have the same value.
• Two values: The first value is for Top and Bottom. The second value is for Left and Right.
• Three values: The first value is for Top. The second value is for Left and Right. The third value is for Bottom.
• Four values: The first value is for Top. The second is for Right. The third is for Bottom. The fourth is for Left.

Negative values are not allowed.

CSS:

/*Shorthand, ONE value: all four sides have the same padding*/
.element { padding: 10px; }
/*Shorthand, TWO values: Top & Bottom - Left & Right*/
.element { padding: 10px 15px; }
/*Shorthand, THREE values: Top - Left & Right - Bottom*/
.element { padding: 10px 15px 20px; }
/*Shorthand, FOUR values: Top - Right - Bottom - Left*/
.element { padding: 10px 15px 20px 25px; }
/*Longhand, all values. They can go in any order*/
.element {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 20px;
  padding-left: 25px;
}

margin

The margin CSS property defines an outside space on one, two, three or all four sides of an element, and it looks like this:

margin: 10px;

Alternatively, it could also look like this:

margin: 10px 15px;

Description

The margin property is the shorthand for margin-top, margin-right, margin-bottom, and margin-left. Just like with padding, we can use one, two, three, or all four values.

• One value: This means that all four sides have the same padding.
• Two values: The first value is for Top and Bottom. The second value is for Left and Right.
• Three values: The first value is for Top. The second value is for Left and Right. The third value is for Bottom.
• Four values: The first value is for Top. The second is for Right. The third is for Bottom. The fourth value is for Left.

Negative values are allowed.

CSS:

/*Shorthand, ONE value: all four sides have the same padding*/
.element { margin: 10px; }
/*Shorthand, TWO values: Top & Bottom - Left & Right*/
.element { margin: 10px 15px; }
/*Shorthand, THREE values: Top - Left & Right - Bottom*/
.element { margin: 10px 15px 20px; }
/*Shorthand, FOUR values: Top - Right - Bottom - Left*/
.element { margin: 10px 15px 20px 25px; }
/*Longhand, all values. They 1can go in any order*/
.element {
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 20px;
  margin-left: 25px;
}

Collapsing margins

There is a particular behavior with the margins. If two stacked elements have top and bottom margins, the margins are not added. Instead, the larger value is the only one taken into account.

For example, we have an <h1> heading and a <p> paragraph. The heading has a bottom margin of 20px, and the paragraph has a top margin of 10px.

Our senses immediately tell us that the total margin is 30px, but in reality, because vertical margins collapse, only the largest value is considered, in this case, 20px.

The reason for this is that many elements, such as headings and paragraphs in our example, have both top and bottom margins. So, having the margins collapse allows the content and layout to maintain consistency and avoid creating undesired extra spacing between stacked elements.

This is also good because it saves us the effort of having to "negate" margins on every stacked element that has top and bottom margins, again, to avoid creating those extra spaces.

The way I see it, is that collapsing margins is an editorial feature of the CSS margin property. I hope that the prior explanations help embrace this behavior.

Here is a demo in CodePen: http://tiny.cc/collapsing-margins

border

The border CSS property is the shorthand that defines an element's border thickness, style, and color.

The border property and all its sister properties (border-width, border-style, and border-color) and variations are self-explanatory, so there's no need for a Description section like in prior properties.

The CSS example ahead will help clarify the use of these properties.

border-width

This is the thickness of the border. It can be declared using px or em, but px yields more controllable results.

border-style

This defines the type of line or no line at all. It supports the following values: dashed, dotted, double, groove, hidden, inset, none, outset, ridge, and solid.

border-color

This defines the color of the line. It supports all color modes: HEX, RGB, RGBa, HSL, HSLs, and color name.

Keep in mind that all HTML elements are squares, so we can target any side of an element with border-top-color, border-right-color, border-bottom-color, or border-left-color.

The order of the values in the shorthand does not affect the output.

In the following example, the top rule in shorthand syntax accomplishes exactly the same accomplishment as the bottom rule with the longhand syntax:

CSS:

/*Shorthand*/
.element-shorthand {
  border: 10px solid green;
}
/*Longhand*/
.element-longhand {
  /*Width*/
  border-top-width: 10px;
  border-right-width: 10px;
  border-bottom-width: 10px;
  border-left-width: 10px;

  /*Style*/
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;

  /*Color*/
  border-top-color: green;
  border-right-color: green;
  border-bottom-color: green;
  border-left-color: green;
}

box-sizing

The box-sizing CSS property allows us to change the way browsers understand the box model by default, and it looks like this:

box-sizing: border-box;

Description

There are two values: content-box and border-box.

content-box

This is the default value. The padding, border, and margin values are added to the final width and height of the element. This value is rarely used exactly because of the behavior I just described.

border-box

On the other hand, since this value changes the box model, the padding and border are not added to the final width and height of the element but only to the margin.

CSS:

/*Padding, border and margin are added to the element's dimensions*/
.element {
  box-sizing: content-box;
}
/*Padding and border are not added to the element's dimensions, only margin*/
.element {
  box-sizing: border-box;
}
/*Always start your CSS with this rule*/
*, *:before, *:after {
  box-sizing: border-box;
}

Here is a demo in CodePen: http://tiny.cc/box-sizing

max-height

The max-height CSS property defines the maximum height of an element, and it looks like this:

max-height: 150px;

Description

The max-height attribute overrides the height property. Negative values are not allowed.

The most used values are a length value and a percentage value.

Length value

This is when we use one of the following units: px, em, in, mm, cm, vw, and so on.

Percentage value

This is when we use percentages such as 50%, 85%, and so on.

You can find more information on MDN at http://tiny.cc/mdn-max-height

CSS:

/*Length value*/
.element {
  height: 75px;
  /*This property overrides height*/
  max-height: 150px;
}
/*Percentage value*/
.element {
  max-height: 65%;
}

max-width

The max-width CSS property defines the maximum width of an element, and it looks like this:

max-width: 75px;

Description

The max-width attribute overrides the width property. Negative values are not allowed.

The most used values are a length value and a percentage value.

Length value

This is when we use one of the following units: px, em, in, mm, cm, vw, and so on.

Percentage value

This is when we use percentages such as 50%, 85%, and so on.

You can find more information on MDN at http://tiny.cc/mdn-max-width

CSS:

/*Length value*/
.element {
  width: 150px;
  /*This property overrides width*/
  max-width: 75px;
}
/*Percentage value*/
.element {
  max-width: 65%;
}

min-height

The min-height CSS property defines the minimum height of an element, and it looks like this:

min-height: 300px;

Description

The min-height attribute overrides the height and max-height properties. Negative values are not allowed.

The most used values are a length value and a percentage value.

Length value

This is when we use one of the following units: px, em, in, mm, cm, vw, and so on.

Percentage value

This is when we use percentages such as 50%, 85%, and so on.

You can find more information on MDN at http://tiny.cc/mdn-min-height

CSS:

/*Length value*/
.element {
  height: 75px;
  max-height: 150px;
  /*This property overrides height and max-height*/
  min-height: 300px;
}
/*Percentage value*/
.element {
  min-height: 65%;
}

min-width

The min-width CSS property defines the minimum width of an element, and it looks like this:

min-widht: 300px;

Description

The min-width attribute overrides the width and max-width properties.

Negative values are not allowed.

The most used values are a length value and a percentage value.

Length value

This is when we use one of the following units: px, em, in, mm, cm, vw, and so on.

Percentage value

This is when we use percentages such as 50%, 85%, and so on.

You can find more information on MDN at http://tiny.cc/mdn-min-width

CSS:

/*Length value*/
.element {
  width: 150px;
  max-width: 75px;
  /*This property overrides width and max-width*/
  min-width: 300px;
}
/*Percentage value*/
.element {
  min-width: 65%;
}

object-fit

The object-fit CSS property defines how a replaced element fits inside its content box, and it looks like this:

object-fit: cover;

Description

A replaced element is an HTML element whose content and dimensions are intrinsic (defined by the element itself) and are not defined by CSS or by its context or surroundings.

Examples of replaced elements are <img>, <video>, <audio>, <canvas>, <iframe>, <textarea>, <object>, <input>, <button>, <br>, and <hr>.

Now, the most important characteristic of replaced elements is that we cannot apply generated content to them via CSS using the :before or :after pseudo-element selectors.

This property can come in handy when we want a group of thumbnails to have the same width and height, but without distorting the images. However, the images for the thumbnails are uploaded by users, which means that the uploaded images can be of all sizes and different aspect ratios. The object-fit CSS property can help us have control of the thumbnails in such a situation.

Tip

The content inside the replaced element is centered vertically and horizontally by default. However, the content can be repositioned using the object-position property.

There are four keyword values: contain, cover, fill, none, and scale-down.

contain

The aspect ratio of the content inside the replaced element is preserved. This content is enlarged as much as possible until it reaches its maximum size defined by its width and height. It's possible to see some "unfilled" areas of the element due to preservation of the aspect ratio.

cover

The aspect ratio of the content inside the replaced element is preserved. This content is enlarged as much as possible until it completely fills or "covers" the entire content box.

fill

The aspect ratio of the content inside the replaced element is not necessarily preserved. This means that when filling the entire content box, the content of the replaced element can be stretched or shrunk during the scaling up or scaling down of the content.

none

No resizing is done.

scale-down

This acts as if none or contain were declared. The idea here is that the browser will try to figure out the smallest concrete size of the content inside the replaced element in order to make it fit in its content box while preserving the aspect ratio of the content inside the replaced element.

CSS:

img {
  width: 15em;
  height: 25em;
 object-fit: contain;
}

Here is a demo in CodePen: http://tiny.cc/object-fit-position

object-position

The object-position CSS property defines the location of the content of the replaced element, and it looks like this:

object-position: right bottom;

Description

As described in the Tip of the object-fit CSS property, by default, the content of the replaced element is placed in the center of the content box, which is 50% 50%.

Now, this property behaves similarly to the background-position CSS property. This means, we can declare either one or two values.

The values are either length or percentages of keyword values top, right, bottom, or left. Negative values are allowed.

CSS:

img {
  width: 15em;
  height: 25em;
  object-fit: contain;
 object-position: right bottom;
}

Here is a demo in CodePen: http://tiny.cc/object-fit-position