Learning CSS Series

Part 2 – Some more advanced concepts

Box Model
Margin Collapsing
Shorthand properties
Height and Width Properties
Understanding Box Sizing

This part covers the Box Model in CSS

Box Model

Every Element in HTML with CSS is treated as a box.

Every element in HTML is treated as above shown hierarchy of boxes that define how it is presented on the screen.

The sections of a box are:
1) Content – The main content on the page

2) The Padding – Space around the content

3) Border – The surrounding region of the content

4) Margin – Difference of space from the page boundary

Margin Collapsing

If there are two elements right one after the other, their margin will be placed such that there is only a single margin.

In the above scenario the bigger margin wins.

The above behaviour is done by CSS to ensure that we don’t get a huge distance between two consecutive elements.

This makes sure that only a single margin is present in such boxe model implementations.

This is further explained below:

1. Adjacent Siblings

In this case, the first element might have a margin of 10px (on all sides let’s say) and the second one has 5px (or 20px – the values don’t matter).

CSS will collapse the margins and only add the bigger one between the elements. So if we got margins of 10px and 5px , a 10px margin would be added between the elements?

2. A parent with children that have a margin

To be precise, the first and/ or last or the only child has to have margins (top and/ or bottom). In that case, the parent elements margin will collapse with the child element(s)’ margins. Again, the bigger margin wins and will be applied to the parent element.

If the parent element has padding, inline content (other than the child elements) or a border, this behavior should not occur, the child margin will instead be added to the content of the wrapping parent element.

3. An empty element with margins

This case probably doesn’t occur that often but if you got an element with no content, no padding, no border and no height, then the top and bottom margin will be merged into one single margin. Again, the bigger one wins.

Shorthand Properties

We can combine values of Multiple properties into a single property

E.g.

border-width: 2px
border-style: dashed | solid
border-color: orange

The above properties all refer to styling the same border and can be combined to represent a single shorthand property.

E.g.

border: 2px dashed orange

For margin we can write either this:
margin-top: 5px;

margin-right: 10px;

margin-bottom: 10px;

margin-left: 5px;

Or we can combine this to a single property as:

margin: 5px 10px 10px 5px;

Read as margin top , right, bottom, left

Height and width Properties

By default the sections in HTML occupy the complete width of the parent element they are mapped to.

They also have an auto height that wraps itself to the actual height needed. This is again fixed to the container of the parent;

We can change that using the height and the width property.

E.g

h1{
width:50%;height: 100vh;}

Understanding Box Sizing

In the above example of changing height, the question arises that, in the box model structure are we changing the height of the content or the content + padding or the content + padding + border or the entire content + padding + border + margin?

If we set such a setup where we change the height and width of a boxed selector, the change is applied only to the content! The css for the padding and border are later added to the total height and width of the content. The margin is also added, but since this is the spacing we always want to have from the page boundary, this is something we can simply remove

E.g. let height of content in h1 is 500px and width be 200 px.

Let the padding be 10 px , margin 10px and border 10 px.

Now the total height = 500px + 2(padding) + 2(border) = 540 px

Similarly width = 200px + 2(padding) + 2(border) = 240 px

Now this is not an ideal behaviour as when changing the height or width we would need to change the overall height and width and not just with content.

The above mentioned behaviour is due to the box-sizing property with the default value in CSS set to content-box.

If we change this to border-box, the above problem will be solved and the example mentioned above will change as:

Let height = 500 px and width = 200px.

With border-box, the total height and width will be the same as provided above.

Code e.g.

.titleMax{

font-size: 2rem;

height: 459px;

width: 500px;

background-color: lightblue;

border: 5px solid black;

margin: 10px;

padding: 10px;

In the above example we can see that even after adding the height and width, we get a much different final value of total height and width. The actual height of the box with border and padding is much greater than the specified height of 459px.

This can be resolved by using box-sizing and specifying the value to be border-box.