The CSS Box Model

Styling an application can be a difficult task, especially when it comes to controlling the size and position of elements on the application’s screen. Have you ever set an element width to 200px, only to find it overflowing the container? Layouts and styling challenges often stem from a lack of clarity on how browsers calculate an element’s final dimensions. The key to fixing these issues is mastering the CSS Box Model. 

For every HTML element used to add objects (words, buttons, images, etc.) to a web page, there is automatically a box around the object. For example, if you add <p> I am a boy </p> to a webpage, the words and the space around them make up a box. The properties of this box help in determining the space that the HTML element would take on the webpage. There are four properties of the box model: 

Content 

The content is the actual object contained in a tag, whether it is a text, image, or video. In the example above, the words in the P tag are the content. In the case of a button, the word(s) inside the button are the content. When you set width and height properties, they apply only to the content area in the default box model.

Padding

The padding is the space immediately around the content of an element. The value of the padding ultimately affects the width and height specified for that element. For example:

<p> I am a boy </p>

p{
width; 40px;
padding: 10px;
}

As a result of the added padding, the total width becomes 60px (40px + 10px to the left + 10px to the right). Padding is usually added to an element so that the contents do not appear squeezed. 

Border 

The border is a line around the element, which, when added, takes up the space after the padding. The thickness of the border is specified to determine how visible you want the border to be. Setting border: none;  removes the border from a tag that comes with an already existing border. 

This is a button with border:

This is a button after the border has been set to none.

There are different border types: solid, dotted, dashed, etc. You can look them up here. 

Margin

The margin is the space immediately after the border. The values given to the margin are used to determine the spaces between two boxes on a webpage. For example, if you give the above <p> tag a margin of 10px, it moves 10px from the box above it, 10px from the box to its left, 10px from the box to its right, and 10px from the box beneath it.

The Box Model in Practice

In adding values to the properties of the box, you could specify where you want the change to happen. Margin-top, padding-left, and border-right are all valid properties. There are also shortcuts to adding these properties. For example, to add different values to each side, you add the value for each side one after the other on the same line:

<p> I am a boy </p>

p {
padding: 10px 5px 15px 7px
}.

The key is to remember that each value is allocated to a default position; you cannot change which position it goes to. The first value goes to the top, the second goes to the right, the third goes to the bottom, and the fourth goes to the left. This is useful so you don’t have to specify different sides of the same property using multiple lines. If you want the top and bottom to have the same value, and left and right to have the same value, you could write: margin: 10px 5px; such that the top and bottom have a margin of 10px, and the left and right have a margin of 5px. If you want all sides to have the same value, giving the property just one value applies it to all sides.

Borders also have a radius property, used to make the edges of the box rounder where necessary. 

This is a button without a radius

This is a button with a radius of 4px

As the object on the web page comes in a box shape by default, adding a border-radius can help us achieve our rounded needs. As long as you add the appropriate value, you will get your desired results.