In CSS, all elements are represented
as rectangular boxes in the browser.
The width and height specified for
an element in CSS are not the final
width
and
height occupied by the element
on the web page.
The actual dimensions include the
collective size of padding, borders
and
height or width.
Let us take a look at an example:
Total width and height in the above example:
From the above code, we understand
that the final width of an element
is calculated as follows:
The final height is calculated as follows: