First Box with Changes

This div element will have a total width of 350px:

The Whole Donut - structure

Storytime - linking many pages

O-phone - Modal window

Here is the calculation:

350px (width)

+ 20px (left + right padding)

+ 10px (left + right border)

+ 40px (left + right margin)

= 420px

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Hello World!

This is the Box Model

The CSS Box Model

In CSS, the term "box model" is used when talking about design and layout.

Everything on the Internet is basically a bunch of boxes. Whether we see them or not, they're there. So here we discuss and display the 3 types of CSS using a combination of boxes.

Explanation of the different parts

Content
Padding
Border
Margin

The 3 types of CSS

There are 3 types of CSS, so far we've exerienced 2 types. The first was inline when creating the WeAreOne.media footer. The second being internal when it comes to the box model. The third type is external and is an entirely separate file with the extension .css and save in the assets folder for our websites.

Learn more about this project by visiting our About page. We've explored lots of topics. Visit the Explore section to learn more and enroll in an ECS class today!

This is the "next-example" style. It includes the declarations for border, padding, margin, and width. The values vary according to the properties.