# Box Model

- Anything that we create in HTML and CSS takes the form of a box.
- You can check this by inspecting.
- Go to any website that we have created till now, select an html element paragraph and right click, then click on **inspect**. Here you see the boxing of your content in the right panel.

Always remember to add height and width to your box otherwise, it will not be visible. Make the box as shown below.

[IMAGE_5 START SAMPLE]
[IMAGE_5 FINISH SAMPLE]

You can customize the size of the box by changing the height and width values.

> Take a real-life example of creating a township including steps like making land cut, house placing, etc. to discuss the box concept. And introduce `padding`.

## Padding
- It is the empty area inside the container.
- You can apply the padding outside your content but it should be inside your container box.
- Syntax to add padding:

h1{
    padding : 20px;
}

- **Increasing the padding** area **decreases the container** space. Because padding is only inside that specific container, it can not go outside of the box.

## Margin
- The CSS margin properties are used to create space around two different elements, outside of any defined borders.
- It prevents your elements from getting overlapped.
- Syntax:
- Create another box as in the previous example then,

.box_2{
    width: 100px;
    height: 120px;
    background-color: blue;
}

- There are already some margins by CCS default. But you can customize it as :

.box_2{
    width: 100px;
    height: 120px;
    background-color: blue;
    margin : 0px;
}

> You can use the universal selector (*) to apply the desired CSS property to all the elements.

Syntax:

*{
   CSS_Property
}

## Applying Margins, Padding and Border
- First, let us create three containers:

[IMAGE_6 START SAMPLE]
[IMAGE_6 FINISH SAMPLE]

- The CSS that we apply in the containers will be applied to all the containers because they all have the same name.
- When you apply margin 20px, it gets reflected in the element from all sides.
- If you want to apply margin from a specific side say top, then :

.container{
    background-color : lightgreen;
    martin-top : 20px;
}

- Likewise, you can apply margin for **bottom**, **left** and **right** side too.

Now, let us apply padding.

- If you apply padding to the container, it gets reflected in the **div tag**. You can check by applying padding to the container.
- So, it should be avoided. Rather it is best practice to **apply padding to the elements** by targeting the element separately in the style tag as:

h1{
    padding : 20px;
}

Coming to margins,
- If can apply four values to the margin property as `margin : 10px 20px 30px 40px;` it will be reflected as `margin : top right bottom left`
- You can try using different margin values to see the different results.
- If you pass three values to the margin property and forget the last value, as `margin: 10px 20px 30px;`, then it will be reflected as "10 px for top and 20 px as left and right both and 40px for bottom".
- If you pass two values to the margin property as `margin : 10px 20px;`, then it will be reflected as "10px for top and bottom, and 20px as left and right.

> All these concepts are similar for **padding**. You just need to use padding in place of margins. And the rest of the rules will be the same.

## Border
- Border is defined as that extra space that you can create around your HTML elements.
- There are many types of borders such as **solid**, **dashed**, **dotted**, etc. that you need to define in the syntax to see it.
- Syntax:

.container{
    background-color : lightgreen;
    martin-top : 20px;
    border : 2px solid red;
}

### Border Alignment Properties
- border-top : 5px solid blue ;
- border-left: 2px solid red;
- border-right: 6px dashed green;
- border bottom: 5px solid red;

### Border Radius Properties
- It is used to apply curved edges to the borders
- Syntax:

border-radius : 20px;

You can also apply this radius to a specific side of the border for example : `` border-top-right_radius: 20px;``

> These are the all properties and concepts (Margins, Padding, and Borders) that together are termed as "**Box Model** in CSS".

# Question
What is the order of values when passing all four values in the margin?
# Choices

- [ ] top right left bottom
- [ ] right left top bottom
- [ ] top bottom left right
- [x] top right bottom left

> Summarizing
- Everything that we create in an HTML is taken as a Box known as **Box Model**.
- It will have two dimensions that are Height and Width.
- And these boxes have three properties that are **Margin**. **Padding**, and **Border**.

# Display

First, let us create a file as shown below to understand the working of the Display property:

[IMAGE_7 START SAMPLE]
[IMAGE_7 FINISH SAMPLE]

> Note: Rem is also a unit to define pixels. It converts the pixel into 10 times. For example **5rem** is **50px**.

When you see the output you can see that the border is taking the whole area of paragraphs. But it should be on the paragraph **p1** only.

Now, let us add a span tag to the file as shown below:

[IMAGE_8 START SAMPLE]
[IMAGE_8 FINISH SAMPLE]

When you run this file, You can see that these **span tags** are not acting as a paragraph. This means that there are no borders applied to it.

Now, give this span tag border, height, and width property as :

span{
    border: 2px solid blue;
    height: 50px;
    width: 50px; 
}

Now give the p tag height and width as :

p{
    border: 2px solid red;
    height: 50px;
    width: 50px;
}

You can see in the output that there are no changes seen in the span tag.

> Note: Block elements can have customizable height and width but you can not provide height and width to the inline elements (**span tag** in this case).

Here comes the need for **Display property**

- Add a random image to the file using **img src tag**.
- Also add an anchor tag entitled "click me".
- You can see that you can provide customizable height and width to the image. Here, it is working as both inline and block elements.
- CSS allows the user to add all of these tags as a Display property.
- Syntax:

p{
    display : inline;
}

This makes your element an **inline-block**. That's the work of the Display property in CSS. After that, you can provide height and width to the inline elements too.