The CSS box-model

@MaximeEuziere 2014

The CSS Ah-ha! moment

(source)


It's (generally) when you realize that:

• Every page element is a box.
• You can control the size, position of those boxes.
• You can decorate those boxes (background, borders...)

The CSS box model

Are all HTML elements really boxes?

Yes*


_{(* kind of)}

How about text?

Text is a DOM node, but it's not a container. It's alwais the content of a container.
No box.

How about <!DOCTYPE> ?

Well, it's not an element, it's a DTD. It's not part of the HTML structure.
No box.

How about <!-- comments --> ?

They are DOM nodes, but they don't appear in the page.
No box.

How about
HTML, HEAD, META, TITLE,
LINK, STYLE, SCRIPT, BASE
elements?

They are hidden by default by Web browsers, but they are boxes like all the others, and you can see them!

http://xem.github.io/show

How about form fields?

They are regular boxes,
but sometimes their padding / margin / border can't be set.




textarea
Select

Hidden inputs can't be shown, but they are boxes... look * :

_{( * look in your inspector)}

How about <BR> ?

BR elements have a box model, but you can't set any box properties to them. They behave like text.

How about inline elements that wrap on multiple lines?

Lorem ipsum dolor sit amet, consectetuer adipiscing elit aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

• Inline elements are boxes too.
• Their width is computed from their leftmost point to their rightmost point.
• Same thing for the height.
• Also, you can't set them a width or a height, and their vertical margins are ignored.

How about CSS circles?

They are just regular boxes with a CSS3 border-radius:



0 - - 50%

More info

How about CSS triangles?

Regular boxes too!

How to make CSS triangles

Do old IE display boxes differently?

Yes, they include the padding and border inside the width and height... *



_{( * but only if you forget to use a DOCTYPE in your HTML! If you put one, it works normally. )}

So all browsers have the same default box model?

Yes, and it's a bad one.
It's called

box-sizing: content-box

That's why CSS resets include this:

*, *:before, *:after {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

Compatible IE8+

Firefox still needs vendor-prefix

JS polyfills exist for IE < 8

There's also box-sizing: padding-box, but you can ignore that too.

what does box-sizing:border-box do?

It includes paddings and borders inside the width and the height.

Example:

/* Default behavior */
div {
  width: 100px;
  height: 100px;
  margin: 30px;
  padding: 20px;
  border: 10px;
}

=> Displayed box will be 160px x 160px

/* Border-box behavior */
div {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 100px;
  height: 100px;
  margin: 30px;
  padding: 20px;
  border: 10px;
}

=> Displayed box will really be 100px x 100px

What happens when an element has box-sizing: border-box, but border + margin is larger than width / height?

They end up modifying the width and height...
But the text doesn't. It just overflows.





Border

Padding

What happens to elements with width: 100% + border + padding?

If they have box-sizing: border-box, they keep their 100% size







If they don't, they overflow:

What happens to block elements with width: auto + border + padding?

If they have box-sizing: border-box, they keep their 100% size







If they don't, it works too, because "auto" width tries to make it fit in the parent:

min-width, max-width, min-height, max-height

Those properties are not part of the box model
they just set limits to the box's size.

NB: in case of conflict, min-width and min-height always win!

Demo

Accessing the box model with JavaScript

Reading computed sizes in JS is a mess, so I'll use jQuery here.

On a box with box-sizing: border-box

Example: 200x200px + 20px padding + 10px border + 30px margin.

.width()          => 140
.innerWidth()     => 180
.outerWidth()     => 200
.outerWidth(true) => 260

On a box without box-sizing: border-box

Example: 200x200px + 20px padding + 10px border + 30px margin.

.width()          => 200
.innerWidth()     => 240
.outerWidth()     => 260
.outerWidth(true) => 320

Margins collapse

More info

Bonus

a.singlediv.com

Bonus

3D matrix transforms

Thanks!

Questions?