HOLLA TECH - LEARN

More on Box Models
 

Every element of the webpage is a box.

CSS uses the box model to determine how big the boxes are and how to place them.  

NOTE!
The box model is also used to calculate the actual width and height of the HTML elements.

Total Width of an Element
 

When working with boxes, it is important to understand how the total width of an element is calculated.
For example, the total width of the box with paddings will be the sum of width plus padding left and padding right.

Holla Tech - Learn CSS

Here is another box with margins, border, and paddings.
The total width is the sum of left and right margins, left and right borders, left and right paddings, and the actual width of the content.

Holla Tech - Learn CSS

NOTE!
When you set the width and height properties of an element with CSS, you set the width and height of the content area. When setting a background-color to a box, it covers the content area, as well as the padding.

Total Height of an Element
 

The total height of an element is calculated the same way as the width.
The example below is the same box from the previous lesson with padding, border and margin.

Holla Tech - Learn CSS

NOTE!
To summarize, Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT