SEC S19W4 || Organization using CSS (box-model Display, Position, Flex)

source

Difference between in-line display and block display?

In-line display is a property that helps to arrange the content in a row format. It can become easier for new containers to be on side of existing containers. This is very much useful property in CSS
It covers up empty places in a row. < a> is one of example of inline elements.

Block display this property does nearly the same in-line property but having the difference that in-line property will not take full width of container, and Block property will take full width of the container. The block property work in a column format, besides the in-line property works in row format.
Ordered list, un ordered list, (ol)(UL) etc are good examples of block property.

The difference between Margin, Padding and Border?

Margin is a form of box model implementation which helps developer to move the box, or create a space between two containers, as wishes and needs. On the other hand padding is used to create a space between box and box item, I mean container and the item container takes. Margin is helpful to create space between containers but from outside, and secondly it's create space from the other containers.
Border is also a form of box model implementation but it separates the boxes by giving them a line, can be dotted, solid etc. It helps developers to separate two containers with a line, a border line. On the other hand, margin is separating the containers without line, padding is useful for container and what it contains.

Define Position property?

It helps us to control elements and property which is used in CSS. There are four major types of position property. Each type effect the element differently.

Sticky this property is used to stuck the user for sometime not to scroll, often surveys and ads webpages use this to earn a massive view of viewer and to awake their interest in the shown things.

Fixed properties it helps to fix the container at wanted place and never leave the screen while scrolling or changing the size of screen. Example is the steemit logo never changes from the top left place, if we are using with android or with desktop.

Relative property is use to position the small element into large elements. It helps the small containers to get set in big containers. Absolute position it's usage is nearly linked with relative property. It helps the small container to position itself around the big container. It helps the small container to get set at the Nearest relative container.

Difference between Grid and Flex:

Practical Work:

---

I have created my steemit profile as assignment

Screenshot of final result

---

html codings

---

CSS

---