troubleshootingBox.md - brainchildservices/curriculum GitHub Wiki

SLIDE-1

Examine and edit your webpage through box model

SLIDE-2

In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

SLIDE-3

The image below illustrates the box model:

SLIDE-4

as we see box Model is Majorly Divided by 4 Parts

1. Content Area - The content area, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player.
2. Padding Area - Clears an area around the content. The padding is transparent.

SLIDE-4(DOWNWARDS)

3. Border Area - A border that goes around the padding and content
4. Margin Area - Clears an area outside the border. Extends the border area to include an empty area used to separate the element from its neighbors.

SLIDE-5

Please Clone the Troubleshooting Reposittory to your Local Storage, to Continue

SLIDE-6

Youtube Link:- https://www.youtube.com/watch?v=rIO5326FgPE&t=53s

SLIDE-7

To Learn More, Visit :

• Basics of CSS Box Model 1,

• Basics of CSS Box Model 2

---