CSS box Modelling and positioning

A VGG Virtual Internship Assignment

CSS box model has to do with the way text, images are rendered on a web page.

there are four basic parts of the box model

1. The content
2. The padding area
3. The border area
4. The margin area

The content area is the innermost part which is usually an image or a text.

The padding area surround the content. it defines the amount of space around the content within the bordered box.

The border area surrounds the padding area and content like a fence.

The margin area is the part that separates the element from its surroundings

Image showing box modelling

CSS POSITIONING

CSS position property helps to define how elements are positioned in a document.

The various CSS positioning are:

1. static: This is the default position. Here, the element is placed according to normal flow.The properties top/left/bottom/right are ignored.
2. Relative: In this positioning, the element is placed at some offset from its normal static position.
3. Absolute: Here, the element is placed at a fixed position within its containing element.
4. Fixed: In fixed positioning, the element is placed at a fixed position within the browser window. this constrains it from scrolling out of view when the page is scrolled.

Author: Ogochukwu Odom

Frontend developer (VGG virtual internship trainee)

Link to github: https://github.com/odomfavour/VGG-registration-form