Scribd
Upload
12 views2 pages

CSS Box Model Lesson

Uploaded by

khaledziraoui123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views2 pages

CSS Box Model Lesson

Uploaded by

khaledziraoui123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

CSS Box Model - Lesson

What is the Box Model?

------------------------

Every HTML element is a box. The CSS Box Model describes how the size of this box is calculated.

It consists of:

1. Content: The actual text or image inside the box.

2. Padding: The space between the content and the border.

3. Border: The line surrounding the padding (optional).

4. Margin: The space between the element and surrounding elements.

Structure of the Box Model:

-----------------------------

[ Margin ]

[ Border ]

[ Padding ]

[ Content ]

Box Sizing:

------------

By default, the size is calculated as:

Total Width = width + padding + border + margin

If you use:

box-sizing: border-box;
Then padding and border are included in the width/height.

Example:

---------

HTML:

<div class="box">Hello!</div>

CSS:

.box {

width: 200px;

height: 100px;

padding: 20px;

border: 2px solid black;

margin: 10px;

box-sizing: border-box;

This makes the element stay within the 200px width including padding and border.

You might also like