What Is Positioning

Positioning means placing the elements at precise location in the browser.

But before we can understand Positioning we need to understand 3 important terms:

1. Box Model
2. Padding
3. Margin

The CSS Box Model

• To understand positioning in CSS we must first understand the box model.
• For display purposes, every element in a document is considered to be a rectangular box which has a content area surrounded by padding, a border and margins.

Box Model Terms

1. Content:  The content. This can be text, images or anything else.
2. Padding:  The space between the contents and the frame.
3. Border:  The frame in the defined thickness.
4. Margin:  The space between the frame and the next item.

Box Types

1. There are two basic types of boxes, block and inline
2. Block boxes are generated by elements such as P, DIV or TABLE.
3. Inline boxes are generated by tags such as B, I or SPAN and actual content like text and images.

Handling Margin

• The margin property is used to declare the margin between HTML element and those elements outside of it.
• The margin can be set for the top, left,right, and bottom of the given element.

Margin values

1. length
2. percentage
3. auto