CSS HEIGHT/WIDTH & THE BOX MODEL

INTRODUCTION

To set the height and width of an element, you need the height and width CSS property to do so. It focuses on the area inside the padding, border and margin of the element.

Boxes are a general term for all HTML elements. When discussing design and layout with CSS, the phrase "box model" is used. Every HTML element is essentially enclosed in a box thanks to the CSS box model. It consists of the content itself, as well as margins, borders, and padding.

THEIR VALUES

When learning about the height and width properties, it is important to understand the values they come with.

📌The inherit value is used when the height and width are being inherited from its parent value.

📌The auto value is a default value given when none is chosen. The browser automatically calculates the height and width.

📌The initial value sets the height and width to its default value.

📌The % value defines the height and width in percent of the containing block.

📌The length value defines the height and width in px (pixels), cm (centimeters) etc.

One thing you must note is, the height and width properties do not set the height/width for the area outside the padding. They only set it for the area inside the padding. This is shown below;

THE MAX-WIDTH PROPERTY

📌It is used to set the maximum width of an element. This property helps when the browser window is smaller than the width of the element. It helps improve the browser's handling of small windows. If there is a max-width and a width property, the max-width overrides the width.

THE BOX MODEL

The box model is seen in the picture below;

(Source:W3schools)

📌 The margin: Clears a territory beyond the border. The margin is transparent.

📌The border: A border that goes around the padding and content.

📌The padding: It clears an area around the content. It is also transparent.

📌The content: Where images and text appear on the webpage.

CALCULATING THE WIDTH OF AN ELEMENT

When the height and width of an element is set with CSS, you have to properly calculate the full size of the element by adding up the padding, borders and margins. This is illustrated below;

The <p> element will have a total of 350px if calculated properly:

p{
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

I am sure you're thinking 'no, the total width of this is supposed to be 335px because duhh, common mathematics' that was my exact thoughts when I was learning about the box model today. But CSS says otherwise. The proper calculation of the total width of the code above would be;

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

The total width of an element is properly calculated as:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

NB: Width is left and right, whilst the height is top and bottom. In case you get confused.

CONCLUSION

Learning about the box model and all it entails is a very important step in becoming good at CSS. What I have listed above is just the icing on the cake. I went much into padding, borders and margins (which wasn't included because this is just a summary of what I have been learning) I hope this helped you to revise in some way if you're a newbie just like me. Thanks for reading!