What is the Box Model?

By knowing how to calculate the dimensions of each box, we can accurately predict how elements will
lay out on the screen.

As we build a new page, we can arrange these boxes on the screen, creating a balanced layout with
white space around the content.

The importance of the box model concept cannot be overemphasized. It would be difficult and
frustrating to create a website without understanding this concept.

The easiest way to understand these components is to use one of the most versatile tools available to us
as web designers: the <div> element.

Padding is applied around the content area

If you add a background to an element ,it will be applied to the area formed by the content and padding

Border applies a line to the outside of the padded area

Outside the border is a margin:

-Margins are transparent and cannot be seen

-They are generally used to control the spacing between elements

The actual content is nested and contained within the opening <div> and closing </div> tags.

When we apply CSS styling directly to the <div> element, all the elements contained within that <div>
will inherit that style.

The height and width properties do not include padding, borders, or margins; they set the height/width
of the area inside the padding, border, and margin of the element!

Negative values are allowed for margins.

Display

The display property specifies if/how an element is displayed.

Every HTML element has a default display value depending on what type of
element it is. The default display value for most elements is block or inline.

Block-level Elements
A block-level element always starts on a new line and takes up the full width
available (stretches out to the left and right as far as it can).

The <div> element is a block-level element.

Examples of block-level elements:

 <div>
 <h1> - <h6>
 <p>
 <form>
 <header>
 <footer>
 <section>

Inline Elements
An inline element does not start on a new line and only takes up as much width
as necessary.

This is an inline <span> element inside a paragraph.

Examples of inline elements:

 <span>
 <a>
 <img>
Display: none;
display: none; is commonly used with JavaScript to hide and show elements
without deleting and recreating them. Take a look at our last example on this
page if you want to know how this can be achieved.

The <script> element uses display: none; as default.

Override The Default Display Value

As mentioned, every element has a default display value. However, you can
override this.

Changing an inline element to a block element, or vice versa, can be useful for
making the page look a specific way, and still follow the web standards.