Introduction to CSS: The Box Model. In CSS, every HTML element is rendered as a box and this is known as the Box Model. And the box model begins with content. The content is the information between the opening and closing tag of an element as seen on the screen. I have an opening paragraph tag, some text that represents content, and the closing paragraph tag. And the content is the center of the box or the box model. Building up the box.

Next is the padding, and the padding is the space between the content and an invisible border. And the border represents the boundary of the box. After the border is the margin, and the margin is the space between one element to another element outside of the border. And each of these box model traits are CSS properties that can be adjusted either on the box as a whole or on a directional basis of top, right, bottom, left. Transitioning to the code editor to demonstrate this.

Now on the screen I have a div with a light blue background and a content of box model. I'm going to begin by adding a border around the div. By default, the border is invisible and there are many ways to apply borders using CSS. I'm going to use the border shorthand property. Inside of the CSS declaration block, I will type 'border' and this shorthand property takes three values. The first value represents the border width. And I will give this a width of five pixels, and the border is still invisible. The next value represents the border style and I will give this a value of solid. And now the border is visible on the page and there are many different border styles.

For demonstration purposes, I will change solid to dash. And now the border is made of broken lines. Going back to the solid style, the last choice represents the border colour. The default border colour is black, but I'm going to change that to purple. As I mentioned earlier, the distance between the content and the border is called padding. I'm going to transition a way to go over the padding and margin CSS structure. Both padding and margin have a shorthand CSS property which is created when simply writing the property name, in this example padding, but there are CSS properties that allow you to target a certain direction, such as padding-top.

Going back to the shorthand operator, I have padding: 10px; on the screen. The first value as written alone represents all four directions. As this is written, I am stating that I want the padding on all four sites to be of equal with 10 pixels. If I add a second value, the first value only represents the top and bottom, while the second value represents the right and left direction. As written, I am stating that I want the top and bottom padding to be 10 pixels wide and I want the right and left padding to be 25 pixels wide.

The final version of the shorthand involves four values, one for each side. Going clockwise, the first value represents the top, the second value represents the right, the third value represents the bottom, and the last value represents the left. And the margin shorthand works in the exact same manner. Transitioning back to the code editor, on the screen I have now hidden the HTML panel and I've made the div larger by doubling its size to 400 * 400 pixels. Know where the content, the text box model, is currently located at. I'm going to begin by adding some padding. So, I will type padding and I will give the padding a value of 50 pixels. And the content has shifted down a little bit. I'm going to increase the padding from 50 to 100 pixels.

Now, the content is further downward. What's causing this to happen? When I increase the padding, the padding fills up the empty space, still maintaining the distance of 100 pixels from the right bottom and left border to the content. There is no shifting because there's more than enough space. The content starts at the top of the box and there is no space between the content and the top portion of the border. The top padding expands to 100 pixels, creating the space between the top border and the content, forcing the content to shift downward in the process.

Padding can be a way of forcing content into a certain location within a div. I'm going to change the CSS for the next demonstration, and now on the code editor I have wrapped a green border around the containing div that holds the blue box. I've also set the margin and padding to 0 pixels in the containing div for demonstration purposes. When it comes to margin, I stated earlier that margin is the space between one element and another. That includes a div that's within a div.

Now, you may be wondering why there's such a wide gap on the right side between the box model div and the containing div. The containing div width is set to 100 percent, so it will take up the full width of the page. While the box model div has a fixed width of 400 pixels. I will change the width of the box model div to 100 percent to demonstrate now that they're both the same width, but before going further, I'm going to change it back. I will begin by typing 'margin-top 15 pixels.' And now the blue box is 15 pixels away from the top border of the containing div.

If you're wondering that the containing div box get bigger, yes. Because I have no fix width or height for the containing div, it will adjust itself on the page to make everything fit. Now, taking this further, I'm going to add a margin bottom property with a value of 25 pixels. And now the box has shifted away from the bottom and the containing box has grown in size. And the spacing works between elements within the element, as you see here, where it's shifted and expand in size, or elements that are side by side and you wish to create separation between those two side by side elements. And that's it. Thanks for watching at Cloud Academy.