CSS Box Model

The CSS box model is a set of rules that help dictate how items are displayed within your website or web project. It defines the parameters of elements, their boundaries, and spacing both in and outside the target element.

This means any web page you see is made up of elements wrapped in rectangular boxes and arranged in relation to each other. These elements can exist beside, above, below, and within each other, depending on the type of element they are.
There are two types of HTML elements: block-level elements and inline elements. Let's take a closer look at each below.

Block-Level Elements
By default, block-level elements start on a new line and take up 100% of the space available — which might be the full width of the viewport or its container if it’s inside another element. Since they start on a new line by default, block-level elements break the flow of the document.With the padding, border, and margin properties applied to a block-level element, other elements will be forced away from the box around the element. As a result of this — and the fact that they span the full width of their container — block-level elements take up more space than inline elements and can create larger structures.

_Block-level elements include the following: _

<p> <h1> <h2> <h3> <h4> <h5> <h6> <ol> <ul> <pre> <address> <blockquote> <dl> <div> <fieldset> <form> <hr> <nonscript> <table> 

Inline Elements
By default, inline elements do not begin on a new line or take up the full width of the viewport. Width and height properties do not apply. Unlike block-level elements, inline elements do not break the flow of the document.

Inline elements can contain other inline elements and data but not block-level elements. For example, a paragraph element can contain an emphasis element — but not a heading element.

If the padding, border, and margin properties are applied vertically, other inline boxes will not be forced away from the box around the element. If the padding, border, and margin properties are applied horizontally, other inline elements will be forced away from the box around the element.

_Inline level elements include _

<b> <big> <i> <small> <tt> <abbr> <acronym> <cite> <code> <dfn> <em> <kbd> <strong> <samp> <var>