Margins

The margin is the space outside an element, surrounding it on all four sides. It creates space between elements and helps separate them visually. Margins are defined in the specified property names

margin = .4rem = 4px

margin = .8rem = 8px

margin = 1.6rem = 16px

margin = 2.4rem = 24px

margin-top = 3.2rem = 32px

margin-left = 4rem = 40px

margin-right = 4.8rem = 48px

margin-botom = 5.6rem = 56px

Padding

Padding is the space inside an element, between its content and its border. It helps to create space between an element's content and its border, and can be specified using the CSS padding property in the same way as margins.

padding = .4rem = 4px

padding = .8rem = 8px

padding = 1.6rem = 16px

padding = 2.4rem = 24px

padding-top = 3.2rem = 32px

padding-left = 4rem = 40px

padding-right = 4.8rem = 48px

padding-botom = 5.6rem = 56px

Containers

For this site we have to consider the margins with respect to other elements, then add CSS proprty according to it.

See the Pen Untitled by narendra (@narendrachn) on CodePen.

Divs

These are main content block elements where it shows Importent information with respet to our site. Divs are should be styled and margined properly to get user attention on that particular block of element.

See the Pen Untitled by narendra (@narendrachn) on CodePen.

Images

For images there is lot of constrains we have to concider like placing the text and headings at particular area in the page. To maintain all these parameters we have to use Margin and padding like shown below.

See the Pen Untitled by narendra (@narendrachn) on CodePen.