CSS: Box Model Basics

Understanding the Box Model is paramount for learning CSS.

The first thing to understand is that every element is represented as a rectangular box. This box consists of four parts: content, padding, borders, and margins.

The content’s area is set by the content’s width and the content’s height. To modify the content area’s size you would use the width, min-width, max-width, height, min-height, and max-height properties. To change its color or add an image to it you can use the background property.

To modify the size of the padding you would have to use the padding property. Padding is shorthand for padding-top, padding-right, padding-bottom, and padding-right. You can use these individually or use the padding shorthand to set them all at once.

To modify the size of the borders you would use the border property. Border is shorthand for border-color, border-style, and border-width. You can also target specific borders by using border-top, border-right, border-bottom, and border-left properties. Borders are similar to content where you can change their color or add an image to them.

To modify the margins you would use the margin property. Margin is shorthand for margin-top, margin-right, margin-bottom, and margin-left. You can use these individually or use the margin shorthand to set them all at once.

It’s important to note here that padding and margins are transparent. Whatever the color of the elements behind them are, will be the color represented when looking at them. While working with CSS remember which one you are using to help you modify the element appropriately.