After examining the selectors, the time has come to start analysing the CSS properties. First, however, it is necessary to dwell on a fundamental preliminary topic: the box model.
This is the mechanism that governs the presentation of the various elements of a page. Let’s go back for a moment to lesson 2. We showed there that an HTML page is nothing more than a set of rectangular boxes, whether they are block elements or inline elements.
Let’s summarize the peculiar characteristics of these two types of elements:
- Block-level elements
- A block-level element can contain other block-level elements and also inline elements, while an inline element can contain only other inline elements.
- A block-level element can be given dimensions.
- An unspecified block level element occupies the entire width of its container box between margins, borders, padding and content. In vertical it will occupy the height necessary for its content.
Inline elements
- An inline element, unless it is declared float, positioned or modified by its nature with the display property, cannot be given dimensions.
- Adjacent inline elements are arranged horizontally, while block elements are arranged vertically.
- An inline element will occupy both horizontally and vertically the height necessary for its content
Box model components
The whole set of rules that manages the visual aspect of block elements is generally referred to the so-called box model.
Starting from the inside we have:
- The content area. It is the area in which the actual content finds space: text, images, videos, etc.. The horizontal dimensions of the area can be modified with the property width. Vertical ones with height.
- Padding. It is a blank space that can be created between the area of the content and the edge of the element. As you can see in the figure, if you set a background color for an element, it extends from the content area to the padding area.
- The border. It is a line of variable size, style and color that surrounds the padding area and the content area.
The margin. It is a space of variable size that separates a given element from adjacent ones.
Attention. These things were not introduced with CSS, but are part of the normal rendering mechanism of an HTML document. When creating an HTML page without style sheets, it is the browser that applies its default settings for some of these properties. For example, it will introduce a certain margin between a title and a paragraph or between two paragraphs. With CSS we can precisely control all these aspects by changing the default settings applied by the browser.
Basic rules of the box model
The box model is governed by a series of basic rules concerning the definition of a box and its relationship with other elements.
Box width
We must distinguish between three concepts:
- the width of the content area;
- the overall width;
- the width of the visible area.
- The first is the value of the width property.
The second corresponds to the space occupied on the page including the margins and is given by this sum:
left margin + left border + left padding
+ Content area
+ right padding + right edge + right edge
The third corresponds to the space occupied on the page excluding the margins, we are talking about the part of the box delimited by the borders and to which you can apply a background. It is given by this sum:
left edge + left padding
+ Content area
+ right padding + right edge
As you can see in the figure, margins, padding and edges must be considered to all intents and purposes part of the overall area of the element.
Let’s clarify with an example:
div {
width: 200px;
padding-left: 10px;
padding-right: 10px;
border-left: 5px solid black;
border-right: 5px solid black;
}
A div so defined, will not occupy on the page a width equal to 200px! The width value refers only to the content area. To calculate the actual and actual width, the values for padding and borders must be added to the 200px. Then: 10 + 5 + 200 + 10 + 5. That is: 230px.
Modify the calculation of dimensions with box-sizing
This mechanism is actually not very logical. Luckily, CSS3 has introduced a way to change the standard box model behavior, if you like. We can do this through the box-sizing property. Just this little snippet of code:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
In this way, for all elements the width set with the width property will be calculated by including the values for the padding and the borders. In the case seen above, the overall width would be 200px, the content area of 170px, because the width value should this time be subtracted and not added values for padding and borders.
Example.
For all details see the article Box model ‘natural’ with border-box.
Width and container element
If no value is set for the width property or if the value used is auto, the width of a box is equal to the width of the content area of the container element. The latter is the element that encloses the box.
Example.
Using the auto value
Only for three properties you can set the auto value: margin, height and width. The effect of using auto is to let the browser calculate the amount of value for each of these properties
Only margins can have negative values. This is not allowed for padding, edges, height and width.
Vertical and horizontal margins between elements
For two vertically adjacent boxes that have set a lower and upper margin, the distance will not be given by the sum of the two distances. The greater distance between the two will prevail. This is the mechanism of the so-called margin collapsing. This mechanism does not apply to adjacent boxes horizontally.