---
# System prepended metadata

title: Box Model and Display property

---

# Box Model and Display property
###### tags: CF-workshops

---

![](https://i.imgur.com/VxovNpx.png)
I'm the box model.

---

## margin:
is the space between the border of the element and the surrounded elements (orange area). margin is a shorthand for margin-top, margin-right, margin-bottom and margin-left.

## padding:
is the space between the content of the element and the border of the element (green area). padding is a shorthand for padding-top, padding-right, padding-bottom and padding-left.

---

### border: is the space between the margin and the content of the element(yellow area).
### width: is the width of the content of the element.
### height: is the height of the content of the element.

#### check : [codepen](https://codepen.io/yaqootturman/pen/porgZLb)
---

### BUT, DO YOU KNOW WHEN THESE PROPERTIES WORK AND WHEN ARE NOT?

---

# Display property


| Block | Inline |Inline-block|
| -------- | -------- | -------- |
| the element will presented as a block so the element will add a new break line before and after it     | the element will not add a new break lines before and after     | here the element will be treated as inline     | --------
 will follow the box model so we can control the width, hight, margin, padding and border of the element | top and bottom margins & paddings are not respected | can take control of width and height. the padding and margin respected but not bottom and top one

[let's check this](https://replit.com/@yaqoot/boxmodel#index.html)

---

Using inline-block to Create Navigation Links
[repl.it](https://replit.com/@yaqoot/Navigation#index.html)

---
Having excercie ...
---


