CSS : The Box-Model

HTML is all about the content, which resides into HTML elements and every HTML element is a box. Before discussing Box-model we need to understand how these elements are displayed.

We know, that elements are either block-level or inline-level elements. Block-level elements occupy any available width, no matter what their content is, and begins on a new line for example,<section>, <article>, <p>. On the other hand, inline-level elements occupy only the width their content requires and line up on the same line, one after the other for example, <span>, <a>, <small>, etc.

Display Properties:

No matter whether an element is block-level or inline-level, it has a default display property value. The common value for display property is block, inline, inline-block, and none. But these default properties can be overwritten. A block can be displayed as inline or an inline can be displayed as a block-level element. However, the inline-block level element is little different and interesting. It allows elements to have both block-level and inline-level properties. Apart from all these values, there is one more, “none” which will hide the element on the page as if that element does not exist in the HTML document.

The Box Model

The Main Pieces of the Box Model

There are 4 important properties that allow you to size and distribute your HTML elements:

• Content
• Padding
• Border
• Margin

To see this box-model, right-click your page in Chrome (or any other browser), click Inspect to open the developer console, select the Styles tab and then scroll down to the very bottom.

Content: The content area, contains the “real” content of the element, such as text, an image, etc. Its dimensions are the content width and the content height. Every element has some default width and height based on the display property. If it is a block-level element it will have 100% width covering whole horizontal space. If it is an inline or inline-block element it will have width according to the content it wraps.

Consider the following example to understand box-model properties. The element has a width of 300px and height of 100px which gives a box with dimensions of 300 x 100.

HTML element

Padding: Padding is the inner space between the content and the border of the box. You can use the same value all across the box. For example,padding: 20px; or you can give padding to only one side of the box, for example,padding-right: 10px;

Besides, there are options for shorthand writing, which allow you to give a different value to each side, without writing them separately. For example,

padding: 10px 20px 5px 15px;

equal to

padding-top: 10px, 
padding-right: 20px, 
padding-bottom: 5px and 
padding-left: 15px.

Padding added to HTML element

Let’s add padding of 20px to our element. Notice that the element’s physical dimensions are now 340 x 140 and not the originally set 300 x 100 because 40(20 + 20) padding was added to each side.

Borders: The three basic properties for creating borders are:

• Border-style :- Mostly used with one of the common keywords: solid, dashed or dotted.
• Border-width :- Tells the browser about the size of the border. Usually, we use pixel value for this property, for example,border-width: 5px;
• Border-color :- By default, the value uses the current Color of the text. However, we prefer to define it even if we don’t have to. For example,border-color: red;

There is a shorthand that gives you the possibility to write all of them together, the border shorthand property. With this property, we can write only

border: 5px solid red;

Here, too that the element’s physical dimensions have changed and are now 380 x 180 and not the originally set 300 x 100 because 40(20 + 20) padding and 40(20 + 20)border was added to each side.

Margins: Margins are the outer spaces between boxes. The margin property is very similar to padding. But instead of applying inside the element, it sets the space that surrounds outside the element. Margin property is applied to provide a gap between the elements on a page. It provides space around the element.

Margin added to the HTML element. Margin does not affect the dimensions of the element.

Box-Sizing Properties

So far, we have seen that all the box model properties are additive. According to the default box model property, to determine the actual size of an element we need to take into account all the box model properties. However, we can change the default box model of an element.

In CSS, there is another property, box-sizing which allows us to change how the box model works and how an element’s size is calculated. Though box-sizing has three possible values (content-box, padding-box, and border-box), the most popular value is border-box.

Border box value changes the box model. It keeps the padding and border within the specified width and height.

CSS : box-sizing: border-box

Our element has a width of 300px, height of 100px, padding 20px, and border around it is 20px, after applying border-box property the actual dimensions will remain 300 x 100 only.

Generally, the box-sizing property of border-box is used for every element. The border-box value makes our math much easier. And to make every element as border-box is consider as the best practice. This will be helpful while working with the percentage unit.

To apply border-box property to every element on a document there is universal selector in CSS.

*, 
*:before, 
*:after {
    box-sizing: border-box;
  }

The * is a universal selector, which target each and every element in the document. The *:before and *:after are pseudo elements.