Calculating box size is very important when placing the box inside another box. This helps in designing the wireframe for a website and adjusting the box contents for a best design. And moreover, calculating horizontal box size is more important than vertical box size because horizontal scrolling is the biggest enemy of web developers and designers. Here we are going to calculate the horizontal box size of an element.
Width of a content
A content is an element which can be either a text, image, video or any media type. When the width property is applied to the content then it follows the width that is set on it.
Adding Left and Right Padding
Along with the width of the content you must add the left and right padding size of that element.
Adding Left and Right Borders
Then the borders are also important when calculating the size of a box. So, you must add the left and right border size.
Adding Left and Right Margins
Though margins are outside border and invisible, left and right margins must also be added as it plays a major role in positioning the content.
Total box size
The total box size includes the content width, left and right padding, left and right borders and left and right margins. Each and every element box size must be calculated in this way for a better web design.