CSS BOX MODEL & DISPLAY POSITIONING

THE CSS BOX MODEL:

What comes to your mind when you hear that? Well for me, I’m 100% sure that I’ll see a box. Lol.

Understanding the CSS Box Model is crucial to being able to properly layout a web page.

All HTML elements can be considered as boxes. And in CSS (Cascading StyleSheets), the box model is a term used when talking about design and layout. The CSS box model is a box that wraps around every other HTML element.

An image illustrating the Box Model

Margins, Borders, Padding plus the actual content of the box are what make up a box.

Below are the explanations of what make up a box:

Margins: This is an area outside the border. It creates clear space around the content, padding, and border.

Borders: This creates a border that goes around the content and its padding.

Padding: Clears an area around the content. The padding is transparent.

Content: At the center of the box, we have the content itself. The content of the box is where your text and images appear.

DISPLAY POSITIONING:

The position property specifies the type of positioning method to be used for an element. There are different values of the position property (static, relative, fixed, absolute & sticky) and we’ll take them one after the other. I’m ready! Are you?

Let’s go!

  • position:static — All HTML elements are positioned static by default. Elements that are positioned static, are not affected by the top, bottom, left, and right properties. An element with position:static is not positioned in any special way; it is always positioned according to the normal flow of the page.
  • position:relative — An element with the relative value is positioned relative to its normal position. If the top, bottom, left and right properties of a relatively positioned property is set, it will cause the element to be adjusted away from its normal position. while other content will not be adjusted to fit into any gap left by the element.
  • position: fixed — An element with position: fixed is positioned relative to the viewport, which means that it will always stay in the same place even if the page is scrolled. The properties used in positioning the element are top, bottom, left and right.
  • position:absolute — An element with position:absolute is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
  • position:sticky — An element with position:sticky is positioned with respect to the user's scroll position. A sticky element toggles between relative and fixed, depending on the scroll position.

Note: These properties will not work unless the property is set first.

Below is a picture of a form I created using the CSS box model and some of the position property values:

And that’s it guys for CSS box model and display positioning 😃!

You can also check out the details of the form in my git repo: https://github.com/Temially/HTML-Form-Box-Model-and-Display Positioning-

Reference: https://www.w3schools.com

A Front-end developer, tech enthusiast, music lover, novel lover...