# The Box Model
Before jumping into the box model, it helps to understand how elements are displayed. The difference between block-level and inline-level elements is covered. Let's recap.
* block-level elements occupy any available width, regardless of their content, and begin on a new line.
* Inline-level elements occupy only the width their content requires and line up on the same line, one after the other.
* Block-level elements are generally used for larger pieces of content, such as headings and structural elements. Inline-level elements are generally used for smaller pieces of content, such as a few words selected to be bold or italicized.
#### Display
Exactly how elements are displayed—as block-level elements, inline elements, or something else—is determined by the display property. Every element has a default `display` property value; however, as with all other property values, that value may be overwritten. There are quite a few values for the `display` property, but the most common are `block`, `inline`, `inline-block`, and `none`.
We can change an element’s `display` property value by selecting that element within CSS and declaring a new `display` property value. A value of `block` will make that element a block-level element.
```css
p { display: block;}
```
A value of `inline` will make that element an inline-level element.
```css
p {
display: inline;
}
```
Things get interesting with the `inline-block` value. Using this value will allow an element to behave as a block-level element, accepting all box model properties (which we’ll cover soon). However, the element will be displayed in line with other elements, and it will not begin on a new line by default.
```css
p {
display: inline-block;
}
```
> **The Space Between Inline-Block Elements**
>
> with inline-block elements is that they are not always touching, or displayed directly against one another. Usually a small space will exist between two inline-block elements. This space is normal.
using a value of `none` will completely hide an element and render the page as if that element doesn’t exist. Any elements nested within this element will also be hidden.
```css
div {
display: none;
}
```
Knowing how elements are displayed and how to change their `display` is fairly important, as the `display` of an element has implications on how the box model is rendered.
### What Is the Box Model?
For customizing the layouts of different elements in the web page,so that the page appear's good and is visually appealing for the user , we make use of CSS box model.
The View Port In the Web page basically consists of many divisions these divisions are called as Margin area,Padding area ,Border area and Content area.
According to the [box model](https://css-tricks.com/the-css-box-model/) concept, every element on a page is a rectangular box and may have width, height, padding, borders, and margins.
**Box-Model has multiple properties in CSS such as:**
* **borders**
* **margins**
* **padding**
* **Content**
**When laying out a document , the browser's render the elements in the form a** ***RECTANGULAR BOX*** **as specified by the CSS box model**
so CSS can be used to customise the layout of our web page according to our requirements using the above mentioned properties of CSS box model.
Every box is composed of four areas, defined by their respective edges,the content edge, padding edge, border edge, and margin edge.
**Let us explore these properties of CSS box model individually**
## Margin Area
The CSS Margin property is used to provide space around elements especially **Outside** the borders.
In CSS Individually we can specify the Margin property according to the requirements.To specify margin on each side of an element we use
* **margin-top**
* **margin-right**
* **margin-bottom**
* **margin-left**
#### In CSS we can style this as:
* margin-top:10px;\
By this above code the top margin of the element is set to 10px.
* margin-right:10px;\
By this above code the right margin of the element is set to 10px.
* margin-left:10px;\
By this above code the left margin of the element is set to 10px.
* margin-bottom:10px;\
By this above code the bottom margin of the element is set to 10px.
***margin is a shorthand property used in CSS***
* **margin** : 10px;\
(here in the above line all sides of element is set to 10px).
* **margin** : 10px 20px 30px 40px;\
(here in the above line the top margin is set to 10px, right margin is set to 20px , bottom margin is set to 30px and lef margin is set to 40px).
* **margin** : 10px 20px;\
(here in the above line the top margin is set to 10px and bottom margin is set to 10px and left and right margin is set to 20 px).\
**By default the margin will be set to approx of 8px in most browser's to nullify this we can give margin as 0px.**\
**we can also use Negative Values too.**\
**At times when two or more elements come across each other either one below other or beside other**
* top and bottom margin's collapses to single margin that is equal to largest of the two margin elements.
* *This does not happen on left and right margins*
**Only top and bottom margins are affected when margin collapsing occur's**
***Properties controlling the margins of a box are***
* margin
* margin-right
* margin-bottom
* margin-top
* margin-left
#### Padding Area
The **CSS Padding property** is used to provide space around the content of the element , especially **Indise** the borders.\
In CSS individually we can specify the **Padding property** according to the requirements.To specify padding on each side of an element use:
* **padding-top**
* **padding-right**
* **padding-bottom**
* **padding-left**
**In CSS we can style this as:**
* padding-top:10px;\
By this above code the top padding of the element is set to 10px.
* padding-right:10px;\
By this above code the right padding of the element is set to 10px.
* padding-left:10px;\
By this above code the left padding of the element is set to 10px.
* padding-bottom:10px;\
By this above code the bottom padding of the element is set to 10px.
***padding is a shorthand property used in CSS***
* **padding** : 10px\
(here in the above line all sides of padding is set to 10px).
* padding : 10px 20px 30px 40px;\
(here in the above line the top padding is set to 10px, right padding is set to 20px , bottom padding is set to 30px and lef padding is set to 40px).
* padding : 10px 20px;\
(here in the above line the top padding is set to 10px and bottom padding is set to 10px and left and right padding is set to 20 px).\
We can even individually provide styling to one of the sides either top or right or left or bottom depending on your requirement.\
**Ooops we can't use Negative Values to CSS padding property like we could in Margin CSS property**
***Properties controlling the Padding of a box are***
* **padding**
* **padding-left**
* **padding-top**
* **padding-bottom**
* **padding-right**
#### Content Area
This area consists of content like text, image, or other media content. It is bounded by the content edge and its dimensions are given by content box width and height.\
The **height** and **width** properties are used to set the height and width of an element.\
\- The CSS **overflow property controls what happens to content that is too big to fit into an area.**
```css
div{
width:20px;
height:30px;
}
CSSCopy
```
in this above code the the div element is set to a width of 20px and height of a 30px.\
\&#xNAN;***The Overflow property can take following values***
* **visible** - Default. The overflow is not clipped. The content renders outside the element's box.
* **hidden** - The overflow is clipped, and the rest of the content will be invisible.
* **scroll** - The overflow is clipped, and a scrollbar is added to see the rest of the content.
* **auto** - Similar to scroll, but it adds scrollbars only when necessary
**To have flexibility with the content on left or right edge and on top and bottom contents**we css provides ***overflow-x*** and ***overflow-y***
* **overflow-x** - Specifies what to do with the left/right edges of the content if it overflows the element's content area.
* **overflow-y** - Specifies what to do with the top/bottom edges of the content if it overflows the element's content area.
***Properties controlling the size of a box are:***
* **height**
* **width**
* **max-height**
* **max-width**
* **min-height**
* **min-width**
***Properties controlling the flow of content in a box are:***
* **overflow**
* **overflow-x**
* **overflow-y**
### Border area
**CSS border property allows us to style the border according to our requirement**\
depending on our requirement we can define border on any one of the side or we can have borders on all side.
#### CSS border Styles
**border-style property specifies what kind of border to display.**\
eg: ***solid, dotted, dashed, double, groove, ridge, inset, outset, hidden, none.***
```css
div{
border-style: solid;
}
CSSCopy
```
### CSS Width Styles
**border-width property specifies the width of the four borders.**
```css
div{
border-style: solid;
border-width: 5px;
}
CSSCopy
```
### CSS border Color Styles
**border-color property is used to set the color of the four borders.**
```css
div{
border-style: solid;
border-color: red;
}
CSSCopy
```
### CSS border Sides Styles
**properties for specifying each of the borders (top, right, bottom, and left)**
```css
div {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
CSSCopy
```
#### Its hectic writing so many codes .... we have short hand property.
```css
div {
border: 5px solid red;
}
CSSCopy
```
## CSS rounded border Styles
**border-radius property is used to add rounded borders to an element**
```css
div {
border: 2px solid red;
border-radius: 5px;
}
CSSCopy
```
### Sample of CSS BOX MODEL
***CODE snippet***
```css
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
```
***The text is the content of the box. A 50px padding, 20px margin and a 15px green was added border.***