Box Model
HTML is essentially an arrangement of boxes. These boxes are invisible until you give them properties in your CSS. The underlying box structure includes the border, madding, and margin (Padding: distance of the box’s content from box’s border. Margin: distance between this box and the other boxes on the page)
The Position Property
The position property is utilized in CSS-based layouts and decided where a box is positioned in comparison to other boxes and in comparison to where it would normally appear in the document flow. There are four different position property values: static, relative, absolute, and fixed. Static is the default positioning, relative gives you the ability to adjust the placement of the box (using top, right, bottom, left), absolute takes the box out of the flow of the document, and fixed is removed form the and is instead stuck to one spot the computer screen.
The Display Property
The default display properties are typically block or inline. Block elements sit one above the other (to change a default block element to inline: p {display:inline;} ). Inline elements sit side-by-side one another (to change a default inline element to a block: a {display:block;} ).