DEV Community

Cover image for CSS HEIGHT/WIDTH & THE BOX MODEL
Maame Afia Fordjour
Maame Afia Fordjour

Posted on • Updated on

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;

Image description

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;

Image description
(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;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)