Just like a busy day at a restaurant, a website can easily look squashed and busy, with waiters having to maneuver their way around and customers chairs up against each other, it can get messy. Good restaurants usually have carefully planned layouts to make customers feel comfortable and allow waiters to move around with ease. Sometimes creative web development requires thinking inside the box. In this video, I will demonstrate how to use the box model in CSS to create an appealing layout and allow users eyes to easily flow between content. When an HTML document and CSS style sheet are downloaded, the web browser needs to know how to display the elements on the screen. To do this, it allocates a rectangle or box to each element. CSS rules are applied to the boxes of the elements. This is known as the box model. Every box consists of four parts. The content, the padding, the border, and finally, the margin. The content is the actual content of the element, like the text or the image. Its size is known as the content width and content height. Browsers are clever and by default, they will calculate the width and height based on the content itself. Fortunately, developers can control the size to manipulate the layout. You can do this by applying CSS rules to the content, such as width, minimum width, maximum width, height, minimum height, and maximum height. Let's move on to the padding. The padding extends the content size. Its size is known as the padding box width and the padding box height. The thickness of the padding is determined by the padding top, padding bottom, padding left and padding right. The padding box width can be calculated as content width plus padding left side plus padding right side. You can calculate the padding box height by adding the content height, the padding top side and padding bottom side together. Next, let me show you how you set the border. The border goes around the padding and content. Its size is known as the border box width and border-box height. You can set different types of borders, such as solid border or a dash border. To understand how this plays out practically, I will demonstrate the HTML, the CSS style, and the physical border. To set the border, you can write border width thin, border width medium, and border width thick. Now, let me share with you a pro developer tip to help you calculate the size of your HTML elements when working with the box model. An HTML element is equal to the size of the border box. To get the border box width, you add the padding box width plus the border left side plus the border right side. You can calculate the border-box height by adding the padding box height and the border top side, as well as the border bottom side. Lastly, let me show you how to set the margin. Following on from what you have just learned, do you have an idea of what the CSS rule might be? The margin extends the border area to separate the element from its neighboring elements. Its size is known as the margin box width, a margin box height. To specify the margin sides, you write, margin top, followed by the value, the margin bottom, margin-left, and margin-right follow the exact same notation. We can also set the padding, border and margin with shorthand properties, but more on this later. Lastly, let's calculate the size of the margin box. Can you guess how? The margin box width can be calculated by adding the border box width, the margin left side and the margin right-side together. To get the margin box height at the border box height, margin top side and margin bottom side together. To easily remember this, think of the content as yourself. The padding is like the thickness of your clothes. The border is like the silhouette or outline and the margin is the personal space between you and another person. In this video, I've opened the box model for you. Inside it is the content and around it flows the padding, the border fits around the padding. Lastly, the margin is the empty space keeping elements apart. You will work with the box model in every website you develop, so I encourage you to start practicing with it in your designs.