# Animatable: Box Model

## Brandon Rozek

September 14, 2015

This post is part 2 of an animation series I am doing; you can read part 1 here. In this post, we’ll look at the different parts of the box model (margin, padding, height, and width) and see how they can be animated.

The W3C has a great starting reference for the CSS Box Model. It can be wordy at times, but has everything you need to know. I had never heard of margin collapsing until I read that. Luckily there is a great post on CSS-Tricks written by Geoff Graham explaining what it is. To see it all in action, take a look at this Codepen demo{.broken_link}–  I reference this multiple times in this post. Now, on to the box model.

### Margin

• Accepts 1 to 4 numerical values (negative numbers are allowed)
• If you use 4 values, the first value is the top margin and the rest follow in a clockwise fashion
• Initial value: 0

Margins can be described as the space around an element. In the Codepen demo (#1), it shows 2 boxes. The first box has a margin-right that is increasing, making it seem as though it’s pushing the second box away.


@keyframes margin {

to { margin-right: 7rem; }

}

.margin {

display: inline-block;

height: 5rem;

width: 5rem;

background-color: lightblue;

vertical-align: top;

}

.margin:first-of-type {

margin-right: 0;

animation: margin 4s ease 0s infinite;

}


• Accepts 1 to 4 non-negative values
• If you use 4 values, the first value is the top margin and the rest follow in a clockwise fashion
• Initial value: 0

Padding is the space between the content and the border of an element. In the demo (#2),  it shows a box in which its padding is increasing.



}

display: inline-block;

background-color: lightgreen;

animation: padding 2.5s ease 0s infinite;

}


### Height

• Accepts a non-negative number, this number is overridden however by (min/max)-height
• Initial value: auto

“Height” is the height of an element without its padding, border, or margin. In the demo (#3) you can see the boxes’ height shrink, and each box begins it’s animation at a different time.


@keyframes height {

to { height: .01rem; }

}

.height {

display: inline-block;

height: 4rem;

width: 3rem;

background-color: violet;

animation: height 1.25s ease 0s infinite;

vertical-align: top;

}

.height:nth-of-type(n) {

animation: height 1.25s ease .2s infinite alternate;

}

.height:nth-of-type(2n) {

animation: height 1.25s ease .4s infinite alternate;

}

.height:nth-of-type(3n) {

animation: height 1.25s ease .6s infinite alternate;

}


### Width

• Accepts a non-negative number, this number is overridden however by (min/max)-width
• Initial value: auto

“Width” is the width of an element without its padding, border, or margin. In the demo (#4), it is similar to #3, however, it’s the width being affected as opposed to the height.


@keyframes width {

to { width: .01rem; }

}

.width {

margin-bottom: .2rem;

height: 3rem;

width: 6.5rem;

background-color: bisque;

}

.width:nth-of-type(n) {

animation: width 1.25s ease .2s infinite alternate;

}

.width:nth-of-type(2n) {

animation: width 1.25s ease .4s infinite alternate;

}

.width:nth-of-type(3n) {

animation: width 1.25s ease .6s infinite alternate;

}



### Conclusion

And so with this we can add another collection of animations to our toolbelt! If you’re wondering why I left border out of this box-model post, it’s because I have already written a post dedicated to just the border animation. Here are some of the resources I looked at for this post. Hopefully I’ll come back with another animatable post soon! https://developer.mozilla.org/en-US/docs/Web/CSS/margin https://docs.webplatform.org/wiki/css/properties/margin{.broken_link} https://developer.mozilla.org/en-US/docs/Web/CSS/padding https://docs.webplatform.org/wiki/css/properties/padding{.broken_link} https://developer.mozilla.org/en-US/docs/Web/CSS/height https://docs.webplatform.org/wiki/css/properties/height{.broken_link} https://developer.mozilla.org/en-US/docs/Web/CSS/width https://docs.webplatform.org/wiki/css/properties/width{.broken_link}