Box Model

The two basic types of elements in HTML are

• Block-level elements, and
• Inline elements.

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

Example 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.

Example of inline elements:

<span>
<a>
<img>

CSS Boxes

Box generation is the part of the CSS visual formatting model that creates boxes from the document’s elements.

The type of the box generated in CSS depends on the value of the display property. We will discuss about display property in the next
section.

The term “box model” is used when talking about design and layout. Every element that is rendered by the browser is essentially a box. It consists of margins, borders, padding, and the actual content. See the below given picture.

Different Parts Of The Element:

Content area
Content area is at the center of box. It holds the content of the box such as text and images. In the above example text “the” is the content.

Padding
Padding is transparent space surrounding content area. Padding space around the content can be specified by using padding property.

Border
A border that goes around the padding and content can be applied by using border property. Every border is displayed with its specified width, so the space occupied by the border around padding area depends on the value declared in through the property.

Margin
Margin is the transparent area outside the border. Default margin area can be changed using margin property.

The box model allows us to add a border around elements, and to define space between elements. In order to set the width and height of an element correctly in all browsers, you need to know the box model works.

The following sample code explains the idea of different boxes:

div {width:300px; padding:25px; border:25px solid navy;
margin:25px 10px 25px 25px;}

Refer the below given picture that stages basic style properties associated with box model.

When you set the width and height properties of an element with CSS, you just
set the width and height of the content area.

Height And Width of the Content Area
As mentioned earlier; a block level element always takes up the full width available (stretches out to the left and right as far as it can). Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the special width, and the remaining space will be split equally between the two margins.