# 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 ... ---