CSS Box Model | Understand CSS Box Model and all It's Properties - CSS Tutorial 68

Notes for You:: CSS Box Model
- Understanding CSS box model clearly, will help us do design web page layouts, which are more manageable and easily editable.

- Imagine every HTML element as a rectangle box meant to hold content.
- Content may be a text, an image, a pdf, a video etc.

- Every HTML box includes four important areas.
1) Content area
2) Padding area
3) Border area
4) Margin area

1) Content area:
- indicates the amount of space required to display the content or the area occupied by the content.
- It is determined by CSS width and height property.

2) Padding area:
- The distance between the content and the border.
- The empty space around the content.
- It is determined by CSS padding properties.

3) Border area:
- The area occupied by the border.
- The area around the padding meant to display border.
- It is determined by CSS border properties.

4) Margin area:
- The area around the border.
- The empty space around the border.
- It is determined by CSS margin properties.

=========================================

Follow the link for next video:
CSS Tutorial 69 - How to calculate width & height of an HTML element

Follow the link for previous video:
CSS Tutorial 67 - CSS list-style-position Property | HTML ul tag

=========================================

CSS Tutorials Playlist:-

=========================================
Watch My Other Useful Tutorials:-

HTML Tutorials Playlist:-

JavaScript Tutorials Playlist:-

jQuery Tutorials Playlist:-

=========================================

► Subscribe to our YouTube channel:

► Visit our Website:

=========================================
Hash Tags:-
#ChidresTechTutorials #CSS #CSSTutorial

[ChidresTechTutorials]

SUBSCRIBE, SHARE & SUPPORT:
VISIT & LEARN AT FREE OF COST:

[srinivasaraoyp]

Your explanation is very clear, I understood the concept. Thank you Sir.

[chillmoaitunes]

file, save, go to browser and refresh. :) thank you for your clear explanation. <3

[shoaib]

The instructor is awesome and has excellent grip on topic. Keep up the good work.

[suganesh]

I think box-model is perfectly match for house blueprint 😂
Margin is like gap between two houses,
Border is fence
Padding is like gap between fence and house
Content is home 😂

[DrNice-qrcj]

My professor had a 15 min. monologue when I wrote, margin: 0px;
px, em, % - zero is always zero, ... :)))

[pjmclenon]

hello sir..why do we need to add margin values for both the div and body HTML elements? ok thznk ..Jrssica