HTML + CSS step by step (2014)

Chapter 6: The Box Model

“The trouble with computers is you *play* with them. They are so wonderful. You have these switches - if it's an even number you do this, if it's an odd number you do that - and pretty soon you can do more and more elaborate things if you are clever enough, on one machine.”- Richard P. Feynman

In this chapter, you will learn about the box model, including:

• Introduction to the box model

• Applying the box model

Introduction To The Box Model

According to the concept of the box model, all elements on a web page are rectangular boxes. However, the size of the box is determined by properties that can be controlled by programmers. The core of this rectangular box is defined by the height and the width of any element which can be adjusted in the display property, by its contents and by specifying the width and height properties.
The dimensions of the box can be modified by changing and adjusting the padding and border elements. You can also adjust the border by specifying the margin.
It is important that you declare the values first or else they will return to their default values.

The Box Model

Applying The Box Model

You need to adjust and play around with the box model to correct the display so that the web page can be presented in a certain way. The properties mentioned above will help you with this.

You can calculate the width of various elements by using this formula: margin-right + border-right + padding-right + width + padding-left + border-left + margin-left. You can also calculate the height: margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom.

In some instances the width property value may be less than the box itself. To correct this you need to adjust the padding, margins and borders of that box. This is because the width doesn’t just include the width property value itself but it also includes these property values.

The preset value of the element is dependent on the display value. The default value for any block-level element is 100%. Block-level elements take up any (horizontal) space available to them. Since inline elements tend not to have a specific size, width and height properties will only be relevant in case of non-inline elements. So, you can use this property if you want to set a specific width for such an element:

div {

width: 100px;

}

The height of any element is dependent upon the content. Elements tend to expand and decrease (vertically) to adjust their contents. Use the height property for your non-inline element.

The margin property will enable you to adjust the amount of space that surrounds an element. You can define the margins of an element to decide how you would like to position the element on a page.

Visit the following website to learn more about the box model: http://learn.shayhowe.com/html-css/opening-the-box-model/.

You can use real examples to make and adjust your own box model.

Summary

This chapter covers the basics of the box model. Every element has a box model and you can change the model by playing around with aforementioned properties.

Questions

1. What is the box model?

2. How can you adjust the box model?